DIV在两个方向上的紧凑排列

Question

使用浮动水平排列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进行排列(不仅仅是这个典型的例子).

Answer 1

假设您正在使用一组动态的任意大小的对象,没有纯CSS方法来实现这一点.在以下情况下,您可以使用CSS3多列布局:

1. 您只需要支持现代浏览器.
2. 所有物体都可以排列成等高的组.

这里,物体以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;
}

http://jsfiddle.net/RTLun/