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

Question

我真的需要你的帮助：

现在我的 div 只是在彼此之上，动态地填充了不同的内容，因此高度正在变化。

我现在要做的是将它们放在 2 行中。使用固定宽度和“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 问题时。

Answer 2

这会做到的......

   <div id="content">
    <div class="column1" id="left">
     <div id="div1">...</div>
     <div id="div3">...</div>
    </div>
    <div class="column2" id="left">
     <div id="div2">...</div>
     <div id="div4">...</div>
    </div>
   </div>

然后通过在你的 CSS 中定义 widht 值来设置 column2 样式。

谢谢，

@leo。