Question

如果有人有领导如何解决这个问题，我将非常感激：

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

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

div的数量是动态创建的，不受限制......

解决方案应该是ie8，ie9兼容

谢谢，乔纳森。！[在此输入图像说明] [1]

示例插图可以在这里找到： https://app.box.com/s/6y89dlan1jt8bpjvcgb9

Answer 1

您是否考虑使用Masonry之类的内容？

Answer 2

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

使用列布局而不是浮动。

This Working Fiddle演示了3列布局，但您可以轻松将其更改为N列。

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

您只需按正确的顺序构建动态内容即可。（每次将动态div放在右栏中。）

这是基本的HTML＆amp; 3列布局的CSS

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

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

小提琴中的脚本仅用于添加动态内容。虽然我的内容有一个固定的高度，但显然也可以改变高度。

BTW：对于2列布局，您不需要这个。只需将奇数项目向左浮动，偶数项目向右浮动。 Like This

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

2 个答案:

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