Question

我有一个容器div，在其中我要打包一个可变数量的div s未知（可变）高度但是给定min-width。我的要求是：

如果容器足够宽以容纳两列，我希望它们能够很好地分布在两列中而没有不必要的空格。
不是，他们应该超越对方。

目前，我已经给出了div s width:48% margin-right:2%;float:left;，它在单列状态下运行良好，但是当我调整浏览器窗口大小时，为每个div两列提供空间最后在左栏中坚持将自己水平对齐到最右边的div的底部：

what I have http://img602.imageshack.us/img602/5719/whatihave.png

这就是我希望他们去的地方（没有浪费的空间）：

what I want http://img96.imageshack.us/img96/6985/whatiwantu.png

如果可能，我想要一个纯CSS解决方案。

谢谢！ /古斯塔夫

编辑：这个标记说明了我的问题：

<html>
<head>
<style type="text/css">
.box {
  width: 48%;
  min-width:550px;
  margin-right:2%;
  margin-bottom: 1.5em;
  background:blue;
  color:white;
  height:180px;
  float:left;
}

.tall {
  height: 250px;
}

</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box tall">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div style="clear:both"/>
</body>
</html>

.box es是动态生成的，它们的高度也是如此，我只是用一个更高的值来说明。

Answer 1

我认为你不能用纯CSS达到预期的效果。我已经使用jQuery Masonry来复制你所追求的效果并且效果非常好。

我很想看到一个纯粹的CSS解决方案，但还没有看到任何接近的东西。

Answer 2

我相信如果你为每个列添加一个div，你可以将编号的div放入其中，你将得到你想要的。像这样：

<div class="containerDiv">
    <div class="column">
        <div class="content">
            1
        </div>
        <div class="content">
            4
        </div>
    </div>
    <div class="column">
        <div class="content">
            2
        </div>
        <div class="content">
            3
        </div>
    </div>
</div>

下一步似乎是“如何平衡我的列”。某些代码正在生成您提到的框。它决定每个盒子的高度。在将请求转发给JSP进行演示之前，此代码需要为每列生成平衡的框列表。平衡，我的意思是“column1的高度类似于column2的高度”

2列浮动浪费空间

2 个答案: