1

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

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

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

如何防止出现空白?

PS,divs是动态生成的!

这是一个jsfiddle

4

1 回答 1

3

使第二个元素向右浮动

看到那个工作小提琴

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

看看这个工作小提琴

于 2013-09-27T13:45:55.887 回答