使用浮动水平安排DIV很容易.例如：
<div style="width: 500px;"> <div style="float:left; width: 200px; height: 100px; background-color:Yellow;"></div> <div style="float:left; width: 150px; height: 60px; background-color:Blue;"></div> <div style="float:left; width: 140px; height: 240px; background-color:Green;"></div> <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div> <div style="float:left; width: 130px; height: 160px; background-color:Purple;"></div> </div>
这将产生：
但是如何横向和纵向排列DIV？在这种情况下,如何在有空的空间(黄色和蓝色DIV下)移动红色和紫色DIV？
注意：这只是一个例子,我希望找到一种方法来为任何一组DIV进行排列(不仅仅是这个典型的例子).
解决方法
假设您正在使用一组动态的任意大小的对象,没有纯CSS方法来实现这一点.如果符合以下条件,您可以使用CSS3多列布局：
>您只需要支持现代浏览器.
>所有对象都可以排列成等高的组.
这里,物体以300px的高度排列.
<div id="blocks">
<div style="height: 100px; background-color: yellow;"></div>
<div style="height: 200px; background-color: blue;"></div>
<div style="height: 300px; background-color: green;"></div>
<div style="height: 200px; background-color: red;"></div>
<div style="height: 160px; background-color: purple;"></div>
</div>
#blocks {
-moz-column-count: 3;
-moz-column-gap: 0;
-webkit-column-count: 3;
-webkit-column-gap: 0;
column-count: 3;
column-gap: 0;
width: 450px;
}
#blocks div {
width: 150px;
}
