堆叠浮动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无法做到这一点。根据{{​​3}}：

  

5）浮动框的外部顶部可能不高于任何块的外部顶部或由前面的元素生成的浮动框。   来源文件。