2列浮动浪费空间

我有一个容器div，其中我想打包可变数量的div s未知（可变）高度，但与给定的min-width。我的要求是：2列浮动浪费空间

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

目前，我已经给了div小号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是动态生成的，所以是他们的高度，我只是把在一个较高的说明。

来源

2010-12-17 Gustav Barkefors

如果你想要一个纯粹的CSS解决方案，也许你应该发布你的标记和CSS而不是屏幕快照。 – Robusto 2010-12-17 16:05:32

我能想到的唯一的东西就是.odd-box {float：left;} .even-box {float：right;}但问题在于如果容器比.box div更宽，布局。有点希望这可能引发一些想法。 – 2010-12-17 16:39:55

我不认为用纯CSS可以达到预期的效果。我用jQuery Masonry来复制你以后的效果，而且效果非常好。

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

来源

2010-12-21 00:11:44 Simon

从某种意义上说，这是我所希望的那种答案。（当然，也很害怕）。页面上的第三句明确指出：“浮动水平然后垂直排列元素”。看起来很棒虽然，非常感谢！ – 2010-12-22 10:42:30

我相信，如果你有一个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进行演示之前，此代码需要为每列生成一个平衡列表。通过平衡，我的意思是“第1列的高度与第2列的高度相似”

来源

2010-12-17 16:07:35 DwB

我发现这种方法很困难，因为我不知道每个'.content'会有多高，因此无法知道将哪个'column'附加到它。或者说，“下一个”一个......此外（假设“列”被浮动），当“折叠”到一列时，排序会很奇怪。 – 2010-12-17 16:13:29

2列浮动浪费空间

回答

相关问题