Javascript 动态生成“；浮动divs”；宽度均匀但高度不均匀时，对齐问题

如果任何人都有解决此问题的线索，我将不胜感激：

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

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

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

解决方案应与ie8、ie9兼容

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

示例说明可在此处找到：

---

您是否考虑过使用类似于？

纯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%;
}

.集装箱{
浮动：左；
宽度：31.33%；
利润率：1%；
}

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

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