Question

我有两列，想按照外观的顺序堆叠不同高度的div。

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

欣赏帮助

Answer 1

你将不得不用JavaScript做到这一点。如果您正在使用jQuery，那么有一个名为Masonry的优秀插件。还有non jQuery version。

引用README on GitHub：

Masonry是一个动态网格布局脚本。把它想象成另一面 CSS浮动。而浮动则水平排列元素垂直，砌体垂直排列元素，每个元素定位网格中下一个开放点的元素。结果最小化不同高度的元素之间的垂直间隙，就像泥瓦匠一样在墙上贴合石头。

single column layout可能就是你要找的东西。

如果您不介意将旧浏览器放在尘埃中，可以使用CSS3 column properties。有一个示例here, on Quirksmode，以及MDN上的一些文档。

Answer 2

使用2 div作为容器，将两列放在这个容器div中，所以给这个div左右浮动......它可能有用...... 网格布局也可以。

不同的高度div在两列中浮动

2 个答案: