可變高度的浮動div（排列）

我有一個簡單的問題，關於浮動div的變量高度的安排。可變高度的浮動div（排列）

目標：

goal

結果：

result

我只是DIV容器用CSS的float：離開;並沒有定義高度。第一個紅圈表明我的技術失敗了，儘管第二個證據表明它是有效的。不幸的是，最後一個（不是屏幕截圖）只是在前一個的高度之後纔開始浮動（所以左側有一個完整的空白空間）。

我該如何解決這個問題？

謝謝！

結果（圖片）：http://i.imgur.com/FkGsB.jpg – 2010-09-30 13:12:57

我不認爲這是可行的與「只是」的CSS 100％，但jQuery的石工應該做的伎倆[http://desandro.com/resources/jquery-masonry/]。那麼，但我希望有人證明我錯了:)

2010-09-30 13:18:49 Hannes

嘿，謝謝！從來沒有聽說過。如果我可以用jquery來做，我會離開css :-)如果它按照你想要的方式工作，就會離開css :-) – 2010-09-30 13:21:08

答案接受和/或up-vote將會非常感謝：D（btw。我使用它爲我的tumblr頁面，工作只是花花公子） – Hannes 2010-09-30 13:22:26

它工作出色，謝謝！ – 2010-09-30 13:39:52

你有兩列。然後相應代碼時：

<div class="column"> 
    contents of first column 
</div> 
<div class="column"> 
    contents of second column 
</div>

（你浴液：留在列的DIV）

2010-09-30 13:25:54

但他有更多的2 – Hannes 2010-09-30 13:32:24

我有超過2，但他在談論列Hannes。所以這個解決方案會很好，除了這個網站將成爲一個.NET數據庫網站，它使得靜態列的使用成爲一個問題。動態地填充內容會是一件麻煩事。不過謝謝！ – 2010-09-30 13:39:22

第一幅圖像中顯示的佈局由兩個獨立的列組成。 – 2010-09-30 13:40:17

回答