html - CSS 在每第 n 个 child 后清除

Question

我在一个容器内有多个宽度相同的元素。由于元素的高度不同，对齐存在问题，您可以在下图中看到。

我想在每第 3 个元素之后清除而不更改 html 标记，以便第 4 个元素进入下一行。我正在尝试添加 nth-child(3):after，但似乎不起作用。

代码如下:

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
}