我有两列,想按照外观的顺序堆叠不同高度的div.
动态创建div.
如果我只将它们漂浮在宽度的50％,那么我很快就会遇到这样的情况：div#4比传入的几个div高5倍.然后下一个div与上一个div的底部顶部对齐.
我需要将容器中的小孩子div设置为完全匹配：
----- -------
1 2
-----
3 -------
----- 4
5
-----
6
-----
7 -------
----- 8
9
-----
10 -------
11
-------
-------
-----
这是代码片段我做了什么：
<style>
.Box {background:#20abff; color:#fff; width:50%; margin: 5px;}
.left {float:left;}
.right {float:right;}
.container {width:205px;}
</style>
<body>
<div class="container">
<div class="Box left" style="height:60px;">1</div>
<div class="Box left" style="height:80px;">2</div>
<div class="Box left" style="height:30px;">3</div>
<div class="Box left" style="height:70px;">4</div>
<div class="Box left" style="height:60px;">5</div>
<div class="Box left" style="height:20px;">6</div>
<div class="Box left" style="height:40px;">7</div>
<div class="Box left" style="height:90px;">8</div>
<div class="Box left" style="height:30px;">9</div>
</div>
</body>
它看起来类似于此
http://dl.dropbox.com/u/142343/divstack.html
欣赏帮助
解决方法
您将不得不使用JavaScript来执行此操作.如果你使用的是jQuery,那么有一个非常好的插件叫做
Masonry,还有
non jQuery version.
Masonry is a dynamic grid layout script. Think of it as the flip-side
of CSS floats. Whereas floating arranges elements horizontally then
vertically,Masonry arranges elements vertically,positioning each
element in the next open spot in the grid. The result minimizes
vertical gaps between elements of varying height,just like a mason
fitting stones in a wall.
single column layout可能是你要找的.
如果你不介意将旧的浏览器放在灰尘中,那么有CSS3 column properties.有一个例子here,on Quirksmode,有一些MDN的文档.