css - 包装上的 CSS 清除所有

Question

我有一个带盒子的应用程序。大框为 300 像素 x 300 像素，小框为 150 像素 x 150 像素。当一个小盒子被点击时，它变成一个大盒子。这些框的样式都为 float:left，并且在调整窗口大小时允许换行。

不幸的是，任何被包裹的小盒子都会在一行中最后一个大盒子的右侧结束（如图所示）。

1）如何在确保包装盒完全清除线的同时允许包装？（在我的例子中，方框 6 和 7 应该在方框 8 的左边）。

2) 有没有什么办法可以让盒子6和7填满盒子1和2下面的空白处，然后用盒子8和上面的盒子填满盒子4和5下面的空白处？

Answer 1

1. 正如马特在评论中建议的那样，使用inline-block. 演示

2. 已经被问过很多次了，这在 CSS 中是不可能的。查看Masonry或Isotope以获得 JS 解决方案。