CSS浮動左和位置元素

Question

我有浮動左邊的問題，我使用容器小窗口900px的大小和內部有線顯示4個元素的元素，結構沒有給我的問題，但如果我使用不同的高度在一個元素，在任何表演權的元素，我把我的CSS

<style> 

#container 
{ 
position:relative; 
width:900px; 
min-height:150px; 
height:auto; 
margin:auto; 
overflow:hidden;  
} 


#elements 
{ 
float:left; 
width:170px; 
min-height:150px; 
height:auto; 
background-color:red; 
margin-right:5px; 
margin-bottom:5px; 
} 



</style> 


<div id="container"> 

<div id="elements">element inside<br>element inside<br>element inside<br>element inside<br>element inside<br>element inside<br>element inside<br>element inside<br>element inside<br></div> 
<div id="elements"></div> 
<div id="elements"></div> 
<div id="elements"></div> 
<div id="elements"></div> 
<div id="elements"></div> 


</div> 

可以在Fiddle

Answer 1

看到由於使用的是固定寬度的箱子一組寬度的容器，你可以使用下面的風格來修復你的問題：

.elements:nth-child(5n+1) 
{ 
    clear:left; 
} 

Example

請注意，我已經改變了你的IDS一類的ID應該是唯一的

Answer 2

首先一個ID名字只允許每頁一次。我建議你將#elements改爲.elements，而不是使用類。您的容器寬度爲900像素，而每個div＃元素的總和爲1050像素。

#container 
{ 
position:relative; 
width:925px; 
min-height:150px; 
height:auto; 
margin:auto; 
overflow:hidden;  
} 


.elements 
{ 
float:left; 
width:150px; 
min-height:150px; 
height:auto; 
background-color:red; 
margin-right:5px; 
margin-bottom:5px; 
} 

.elements:last-child{ 
margin-right:0; 
}