动态创建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
欣赏帮助
解决方法
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的文档.
原文地址：https://www.jb51.cc/html/224010.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
