动态生成的“浮动div”，宽度均匀但高度不均匀，对齐问题

Question

如果有人带头解决这个问题，我将非常感激：

问题描述 ：我们动态地生成了甚至witdh但没有高度的“ floating div”。（基于内容）。 “父容器”将具有不同的宽度参数，以允许2,3,4（在附加的示例中为2列和3）divs适应其宽度。 divs的顺序是从左到右，始终按等级顺序1,2,3等...

我们如何在不造成差距的情况下实现这一目标？ （由传统的浮动方法引起）。

div数量是动态创建的，没有限制...

解决方案应与ie8，ie9兼容

谢谢，乔纳森。 ！[在此处输入图片描述] [1]

示例插图可在此处找到： https : //app.box.com/s/6y89dlan1jt8bpjvcgb9

Answer 1

您是否考虑过使用砌体之类的东西？

Answer 2

纯CSS解决方案-跨浏览器（IE6 +）

使用列布局而不是浮动。

此工作小提琴演示了3列的布局，但是您可以轻松地将其更改为N列。

对于N列布局，您需要创建N个容器，每个容器的宽度为100 / N，并相应地填充它们。

您只需要以正确的顺序构建动态内容。 （每次将动态div放在右列中）。

这是3列布局的基本HTML和CSS

<div class="Container">
</div>
<div class="Container">
</div>
<div class="Container">
</div>

.Container {
    float: left;
    width: 31.33%;
    margin: 1%;
}

小提琴中的脚本仅用于添加动态内容。 尽管我的内容具有固定的高度，但显然可以在更改高度的情况下使用。

顺便说一句：对于2列布局，您不需要此。 只需使奇数项向左浮动，偶数项向右浮动即可。 像这样