私の<main>要素の中には、それぞれに class を持つ div があり.dataCardます。それぞれ.dataCardの最小サイズは同じですが、.dataCards にコンテンツを追加し始めるとすぐに、レイアウトの動作がおかしいことに気付きました。
要素は、<main>それぞれが を含む 2 つの列に分かれています.dataCard。.dataCardこれを行ったのは、左の列に移動し、次に右の列に 1 つ、左の列に 1 つという順序が必要なためです。
しかし、.dataCards をコンテンツで埋めると、他のすべてのカードがその下に押し込まれます。
それらを含む要素の高さができるだけ小さく.dataCardなるように、使用可能なスペースを sで埋めるにはどうすればよいですか。<main>
現在、下のリンクでは、右の列に 2 番目のカードがありますが、空白がたくさんあり、2 番目のカードの最後に左の列の 3 番目のカードが始まります。
左の列を上に移動するにはどうすればよいですか。つまり、フレックスボックスの有無にかかわらず、カードを利用可能なスペースに合わせるにはどうすればよいですか?
あらゆる助けをいただければ幸いです。
リンクは次のとおりです: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html