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