css - 高さが拡張された article 要素は、その下のすべての行と列の他の article 要素を押し下げています

Question

記事要素のラスターがあり、それぞれがイベントを表しています。チェックボックス ハックを介して、各イベントの追加コンテンツが展開され、マウス クリックで表示されます。問題は：

展開された記事のすぐ下にある同じ列の記事だけが押し下げられ、他の列の記事も押し下げられないということはどういうわけか可能でしょうか (イベント 4、赤いものなど)。

例 (sass、コンパス、特異点を使用) はgist https://gist.github.com/rpkoller/678e30212e9da8b41619として保存され、 sassmeister ではhttp://sassmeister.com/gist/678e30212e9da8b41619です(sassmeister の例にも問題があります同じコードでローカルに発生していない少し明確な問題はさておき)

現時点では、その問題を解決する方法がわかりません。各ヒントは大歓迎です。よろしくラルフ

Answer 1

これがまさに、グリッド レイアウトが機能する方法です。最初に要素が行で形成され、次に行が垂直に積み上げられます。

あなたは反対のことを望んでいるようです：要素が列に形成され、次に列が水平に積み重ねられます。HTML/CSS では、グリッド内の要素の正確な数がわかっている場合にのみ可能です。列ごとにコンテナーを作成し、Singularity に合わせて要素をコンテナーに分散します。

これを任意の数の要素に対して機能させたい場合は、要素を動的に整列させる JS ライブラリを使用する必要があります。そのようなライブラリは数十あります。最もよく知られているのはメイソンリーですが、必ずしも最高とは限りません。私が気に入っているのは、CSS を利用してグリッドをレイアウトできるSalvattoreです。