CSS在每个孩子之后清除

我有一个容器内有多个宽度相同的项目。 由于元素的高度不同，alignment方式有问题，您可以在下面的图像中看到。

我想在每一个第三个项目之后清除而不改变html标记，以便第四个项目进入下一行。 我试图添加n-child（3）：之后，但似乎不起作用。

代码如下：

HTML：

<div class="list"> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet</div> </div> 

CSS：

 .item:nth-child(3):after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

演示： http : //jsfiddle.net/KPXyw/

Answer 1

其实是的

 .item:nth-child(3n+1){ clear:left } 

Answer 2

 .item:nth-child(3n+1){ clear:left } 

更新小提琴

Answer 3

你应该使用nth-child(3n+1)这样它会发生在孩子之后的每个孩子3 nth-child(3n+1) ，不仅在第3个孩子。

然后，你应该删除:after ，你想清除实际的孩子。

Answer 4

sabof是对的。 但是，如果使用display: inline-block而不是float:left那将会很好。 请看下面的例子。

 .list { width: 300px; font-size: 0; } .item { display: inline-block; width: 90px; font-size: 16px; background: yellow; margin-right: 5px; margin-bottom: 10px; vertical-align: top; } 

 <div class="list"> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet</div> </div> 

Answer 5

您可以使用：

 .list { display:flex; flex-wrap: wrap; ... } 

见下文：

 .list { width: 300px; overflow: hidden; display: flex; flex-wrap: wrap; } .item { float: left; width: 90px; background: yellow; margin-right: 5px; margin-bottom: 10px; } .item:nth-child(3) { background: brown; } .item:nth-child(3):after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

 <div class="list"> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet,</div> <div class="item">Lorem ipsum dolor sit amet</div> </div> 

Answer 6

尝试这个工作

 .list{ width: 300px; overflow: hidden; } .item{ float: left; width: 90px; background: yellow; margin-right: 5px; margin-bottom: 10px; } .item:nth-child(4){ //background: brown; clear:both; } 

这些只需要。

Answer 7

使用下面的代码

 .item:nth-child(4){clear:both;}