将div彼此堆叠成两行，没有空格

Question

我真的需要您的帮助：

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

我现在要做的是将它们放置在两行中。 具有固定的宽度和“ float：left”，这种功能已经可以使用了。

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

如您所见，由于第三个div由于第2个div可能比第一个div高，所以第三个div不在第一个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 砌体使您的生活变得更加轻松..不要重新发明轮子，尤其是当您面对经典的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。