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/

Answer 2

您可以使用position:absolute css属性以及top，left来实现相同目标。

<div style="width: 500px;">
 <div style="position:absolute; width: 200px; height: 100px; background-color:Yellow;"></div>
 <div style="position:absolute; left:200px; width: 150px; height: 60px; background-color:Blue;"></div>
 <div style="position:absolute;left:350px; width: 140px; height: 240px; background-color:Green;"></div>
 <div style="position:absolute;top:100px; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="position:absolute; left:200px;top:60px;width: 130px; height: 160px; background-color:Purple;"></div>
</div>

<强> Live demo

Answer 3

对于垂直排列div，您可以使用jquery插件masonry

它有这样的效果：
 

这个插件很容易使用：

    $(function(){
      $('#container').masonry({
        // options
        itemSelector : '.item',
      });
    });

此live demo显示了它在您的示例中的工作原理

Answer 4

或者，如果你不是绝对定位的忠实粉丝（就像我一样），试试这个：

<div style="width: 500px;">
    <div style="float: left;">
        <div id="yellow"></div>
        <div id="red"></div>
    </div>
    <div style="float: left;">
        <div id="blue"></div>
        <div id="purple"></div>
    </div>
    <div id="green"></div>
</div>

使用相应的CSS：

#red {
    width: 180px;
    height: 200px;
    background-color: Red;
}

#yellow {
    width: 200px;
    height: 100px;
    background-color: Yellow;
}

#blue {
    width: 150px;
    height: 60px;
    background-color: Blue;
}

#green {
    float: left;
    width: 140px;
    height: 240px;
    background-color: Green;
}

#purple {
    width: 130px;
    height: 160px;
    background-color: Purple;
}

Here是一个小型演示。

Answer 5

您可以在不操纵标记的情况下执行此操作：

<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:right; width: 140px; height: 240px; background-color:Green;margin-right:10px"></div>
 <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="float:left; width: 130px; height: 160px; background-color:Purple;margin-top:-40px;margin-left:20px"></div>
</div>

检查小提琴

http://jsfiddle.net/E6VkW/