每个n-child之后CSS清除

Question

我在容器内有多个宽度相同的物品.由于元素的高度不同,对齐存在问题,您可以在下面的图片中看到.

我希望在每个第3项之后清除而不更改html标记,以便第4项转到下一行.我正在尝试添加nth-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
}

更新小提琴