浮动的div，不同的高度，从左到右建造.如何填充级别之间的垂直间隙

Question

好的，你好。这是交易。

我有 N 个高度不同的div。我需要用他们建造一堵墙。没有额外的图书馆，如砖石或自由墙。

我的问题是我不明白如何正确填充整个包装器。看看我的例子：

.HTML

<div id="wrapper">
<div class="child">Div 1<br />Something</div>
<div class="child">Div 2<br />Something<br />Something<br />Something<br />Something<br />Something</div> 
<div class="child">Div 3<br />Something<br />Something</div> 
<div class="child">Div 4<br />Something<br />Something<br />Something</div> 
<div class="child">Div 5<br />Something</div> 
<div class="child">Div 6<br />Something<br />Something<br />Something<br />Something<br />Something<br />Something</div> 
<div class="child">Div 7<br />Something<br />Something</div> 
</div>

.CSS

#wrapper {
    width:420px;
}
.child {
    float:left;
    width:120px;
    padding-left:15px;
}

JSFiddle

有问题。Div 4 堆叠在 Div 3 以下，而不是 Div 1。它也会垂直破坏填充物。我真的找不到方向看。谁能帮我去哪里挖？如何使用我的div 构建道具布局，从左到右，从上到下。

Answer 1

好吧，

如果你有n-div，它们可能是动态生成的。在这种情况下，请尝试在新行中的每个第一个div 添加一个额外的类：

.last{
    clear: both;
}

http://jsfiddle.net/98Luw/17/

我不知道更好的方法

干杯

Answer 2

您可以设置display：inline-block;而不是浮动它们：

display: inline-block;
vertical-align: top;

虽然我建议为此使用库，但它可能会让你在IE上头疼

Answer 3

必须承认...从这个问题中学到了很多东西。这是一个使用纯CSS的解决方案

.CSS

#wrapper {
    width:420px;
    word-wrap: break-word;
}
.child {
    width:120px;
    padding-left:15px;
    display:inline-table;
}

显然，display:inline-table;做到了！！ :)

Answer 4

我编写了自己的脚本来用我的div 建造一堵墙。 有点解决了我的问题。

如果有人需要这个 - 这是方向：

检查窗口大小，

根据该大小定义列的数量，检查div 的数量并构建它们的数学矩阵，添加 row1 col1、row1 col2 等类。

在那之后.animation（）魔法。

谢谢大家