Question

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

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

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

如何防止出现空白？

PS，div是动态生成的！

Here's a jsfiddle

Answer 1

使第二个元素浮动

查看Working Fiddle

<强> 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;
}

查看此Working Fiddle

使列布局中的浮动元素上升以满足上面的元素

1 个答案: