Css 在两个方向上紧凑地排列div

用浮子水平排列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属性以及
顶部
，
左侧
来实现同样的效果

<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>



或者，如果你不是绝对定位的忠实粉丝（像我一样），试试以下方法：

<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>

这是一个小演示。
您不需要像这样操作标记即可完成：

<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>



检查小提琴

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

它的效果如下：


此插件非常易于使用：

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

这说明了它在您的示例中是如何工作的
假设您使用的是一组任意大小的动态对象，没有纯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;
}


#块{
-moz列数：3；
-moz列间距：0；
-webkit列数：3；
-webkit列间距：0；
列数：3；
列间距：0；
宽度：450px；
}
#积木组{
宽度：150px；
}

您想要的实际布局是什么？如果你能分享一些实际布局的图片会更好（需要）。事实上，我从mansory那里得到了整个想法，但我更喜欢用CSS而不是javascript进行简单的安排。这是一个很棒的想法，我非常喜欢，但问题是需要固定高度，因为我们无法对一组动态div进行控制。如果您只关心webkit浏览器，可以使用“column break-inside:avoid”强制每个新项到一个新列。请看一个例子。绝对精彩！这真的很了不起，我相信未来的网页设计是基于CSS3的。所有主要的浏览器都试图支持它。
<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;
}