在列布局中使浮動元素向上滑動以滿足上述元素

Question

假設我有3 div元素都具有width:50%但是具有不確定的高度。現在說這些元素都具有屬性float:left。

由於width:50%屬性，三個元素現在處於兩列布局，第一個元素位於第二個元素的左邊，第三個元素位於第一個元素的下方。

現在，如果第一div是50像素高，並且所述第二div是200像素高大，第三DIV坐在由較高的div創建的線的下方，並且因此爲150px一個白色的大空間創建於div 1和div 3之間。

如何避免發生空白？

PS，div s正在動態生成！

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