10

我有两列，想按外观顺序堆叠不同高度的 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

感谢帮助

4

2 回答 2

12

您将不得不使用 JavaScript 来执行此操作。如果你使用 jQuery，有一个很棒的插件叫做Masonry。还有非 jQuery 版本。

引用GitHub 上的自述文件：

Masonry 是一个动态网格布局脚本。将其视为 CSS 浮动的另一面。浮动将元素水平排列然后垂直排列，而砌体垂直排列元素，将每个元素定位在网格中的下一个开放点。结果使不同高度的元素之间的垂直间隙最小化，就像石匠在墙上安装石头一样。

单列布局可能是您正在寻找的。

如果您不介意将旧浏览器抛在脑后，可以使用CSS3column属性。在 Quirksmode 上有一个示例，在MDN上有一些文档。

于 2012-07-10T13:51:05.073 回答
2

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

于 2012-07-10T15:04:44.123 回答