css - 将 div 堆叠成 2 行，没有空格

Question

我真的需要你的帮助:

现在，我的 div 彼此重叠，动态填充不同的内容，因此高度在变化。

我现在要做的是将它们排成两行。使用固定宽度和“float:left”，这已经可以工作了。

我的英语不是很好所以请先看看我的示例图片:

正如您所看到的那样，由于第三个 div 没有从第一个 div 的正下方开始，因为 div 编号 2 可以比第一个 div 更高，所以有这个空白。

我现在想知道是否有可能自动将这些 div 定位得更高，这样就没有空白(它们应该总是从图片正下方开始，该图片位于空白上方，左侧或右侧)。

像这样:

希望您能理解我的意思:D 在此先感谢您的回复!

编辑:代码示例:

<div id="content">
<div class="xyz">BLABLA</div>
<div class="xyz">BLABLA<br>morebla!<br>EVEN MORE BLA</div>
<div class="xyz">BLABLA</div>
</div>
<style>
#content {
width: 648px;
}
.xyz {
width: 303px;
float: left;
border:1px solid black;
}
</style>

记住，高度总是不同的!

Answer 1

jQuery masonry让您的生活更轻松..不要重新发明轮子，尤其是当您面临经典的 css 问题时。