將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。