堆栈浮动css

问题：不能用CSS堆叠浮动。堆栈浮动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（或者用砌体工作的例子）。

来源

2013-03-19 Oleg

这不能用CSS来完成。每specs for floats：

5）的浮动框的外顶部不得低于较早前源文档中的元素产生的任何块或浮动框的外顶部。

来源

2013-03-19 18:35:08 j08691

如果我诉诸固定宽度并通过媒体查询控制响应能力怎么办？你认为值得花时间或者直接寻找JS解决方案吗？ – Oleg 2013-03-19 21:05:03

就我个人而言，我会去JS路线。 – j08691 2013-03-19 21:06:28

难以提供一个简短的例子（或一个参考）？ – Oleg 2013-03-19 21:13:23

堆栈浮动css

回答

相关问题