Question

我有左浮动的问题，我使用容器widt 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

请注意我已将您的ID更改为类，因为ID应该是唯一的

Answer 2

首先，每页只允许一次ID名称。我建议您将#elements更改为.elements，而不是使用类。您的容器宽度为900像素，而每个div＃元素的总和为1050px。

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

CSS浮动左侧和位置元素

2 个答案: