css - ラップ時の CSS すべてクリア

Question

ボックス付きのアプリケーションがあります。大きなボックスは 300px x 300px、小さなボックスは 150px x 150px です。小さなボックスをクリックすると、大きなボックスに変わります。ボックスはすべて float:left としてスタイル設定されており、ウィンドウのサイズが変更されたときに折り返すことができます。

残念ながら、ラップされた小さなボックスは、行の最後の大きなボックスの右側に配置されます (図のように)。

1) ラップされたボックスが完全にラインをクリアすることを確認しながら、ラップを許可するにはどうすればよいですか? (私の例では、ボックス 6 と 7 はボックス 8 の左側にあるはずです)。

2) ボックス 6 と 7 でボックス 1 と 2 の下の空きスペースを埋め、ボックス 4 と 5 の下の空きスペースをボックス 8 以降で埋める方法はありますか?

Answer 1

1. Matt がコメントで提案したように、を使用しますinline-block。デモ

2. 何度も尋ねられましたが、CSS では不可能です。JS ソリューションについては、MasonryまたはIsotopeを確認してください。