javascript - 使列布局中的浮动元素上升到上面的元素

Question

假设我有 3 个div元素都具有width:50%但具有未定义的高度。现在说这些元素都有属性float:left。

由于该width:50%属性，三个元素现在处于两列布局中，第一个元素位于第二个元素的左侧，第三个位于第一个元素的下方。

现在，如果第一个div是50px高，第二个div是200px高，则第三个 div 位于由较高 div 创建的线下方，因此在和之间创建了一个150px的大空白。div 1div 3

如何防止出现空白？

PS，divs是动态生成的！

这是一个jsfiddle

Answer 1

使第二个元素向右浮动

看到那个工作小提琴

HTML：

<div class="First"></div>
<div class="Second"></div>
<div class="Third"></div>

CSS：

div
{
    float: left;
    width: 50%;
}

.First
{
    height: 50px;
    background-color: red;
}

.Second
{    
    height: 90px;
    background-color: yellow;
    float: right;
}

.Third
{
    height: 50px;
    background-color: green;
}

编辑：如果您有未知数量的 div，则类似于此HTML（根据需要更改大小）

<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>

只需使用这个CSS：

div
{
    width: 48%;
    margin: 1%;
    background-color: #09F;
}
div:nth-child(odd)
{
    float: left;
}
div:nth-child(even)
{
    float: right;
}

看看这个工作小提琴