假设我有 3 个div
元素都具有width:50%
但具有未定义的高度。现在说这些元素都有属性float:left
。
由于该width:50%
属性,三个元素现在处于两列布局中,第一个元素位于第二个元素的左侧,第三个位于第一个元素的下方。
现在,如果第一个div
是50px高,第二个div
是200px高,则第三个 div 位于由较高 div 创建的线下方,因此在和之间创建了一个150px的大空白。div 1
div 3
如何防止出现空白?
PS,div
s是动态生成的!
假设我有 3 个div
元素都具有width:50%
但具有未定义的高度。现在说这些元素都有属性float:left
。
由于该width:50%
属性,三个元素现在处于两列布局中,第一个元素位于第二个元素的左侧,第三个位于第一个元素的下方。
现在,如果第一个div
是50px高,第二个div
是200px高,则第三个 div 位于由较高 div 创建的线下方,因此在和之间创建了一个150px的大空白。div 1
div 3
如何防止出现空白?
PS,div
s是动态生成的!
使第二个元素向右浮动
看到那个工作小提琴
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;
}
看看这个工作小提琴