堆栈div在两行中没有空格

Question

我真的需要你的帮助：

现在我的div已经相互叠加，动态填充各种内容，因此高度正在发生变化。

我现在要做的是将它们分成两行。有一个固定的宽度和“浮动：左”这种方式已经有效。

我的英语不是最好的，所以请先看看我的示例图片：

正如你所看到的那样，这个空白是因为第三个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。