堆棧浮動css

Question

問題：不能用CSS堆疊浮動。

在示例http://jsfiddle.net/9YQXP/7/我有3個div，其寬度是其容器的35％。我不會提前知道每個div的高度，但我希望第三個div能夠在第一個div下面堆疊。

HTML

<div id="a1">a1</div> 
<div id="a2">a2</div> 
<div id="a3">a3</div> 

CSS

div { 
    text-align: center; 
    float: left; 
    width: 35%; 
    border: 1px solid #000; 
} 
#a1, #a3 { 
    height:20px 
} 
#a2 { 
    height:30px 
} 

其他答案：一個類似的問題（Float stacking css）已經回答了一個鏈接到http://masonry.desandro.com/。但是，它已經被javascript解決方案解答了，我也更喜歡僅用CSS（或者用砌體工作的例子）。

Answer 1

這不能用CSS來完成。每specs for floats：

5）的浮動框的外頂部不得低於較早前 源文檔中的元素產生的任何塊或浮動框的外頂部。