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

【问题标题】：Dynamically generated “floating divs” with even width but not even heights, align issue动态生成的“浮动 div”，宽度均匀但高度不均匀，对齐问题
【发布时间】：2013-10-04 06:41:46
【问题描述】：

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

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

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

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

解决方案应该兼容ie8,ie9

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

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

【问题讨论】：

标签： javascript html css responsive-design floating

【解决方案1】：

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

【讨论】：

【解决方案2】：

纯 CSS 解决方案 - 跨浏览器 (IE6+)

使用列布局而不是浮动。

This Working Fiddle 演示了 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 列布局，您不需要这个。只需使奇数项向左浮动，偶数项向右浮动。 Like This

【讨论】：