html - 如何将 div 定位在前一个 div 的下方，而不是在具有最大高度的 div 下方

Question

我有 3 个 div...

如果我将 div 向左浮动，它会看起来像这样..

现在，我希望“Div 3”像这样位于“Div 2”下方..

所以，我把

clear: both

到“Div 3”，但最终看起来像这样:

“Div 3”位于最大高度的div 下方，在本例中为“Div 1”。我应该怎么做才能实现类似于图3 的定位？

Answer 1

您有几个选择。

首先，您可以让所有内容都float: left 并在父容器上放置一个宽度以防止Div3 被放置在顶行。只要parent twidth大于div1和div2的宽度，宽度就会将其降低到Div2下面的下一行。

其次，您完全可以定位 div。

最后，如果您不想做其中任何一个，最好的办法是使用像 Masonry 这样的 JavaScript 库。或 Isotope .创建这些库是因为您想要的布局很难用纯 CSS 实现。