0

如果有人能解决这个问题，我将不胜感激：

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

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

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

解决方案应该兼容ie8,ie9

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

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

4

2 回答 2

0

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

于 2013-10-04T06:52:58.563 回答
0

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

使用列布局而不是浮动。

这个 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 列布局，您不需要这个。只需使奇数项向左浮动，偶数项向右浮动。像这样

于 2013-10-04T08:54:43.863 回答