每个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
}

Updated Fiddle

Answer 3

你应该使用nth-child(3n+1)，以便它在每个孩子身上发生一次，这个孩子在3岁以后的孩子身上发生，而不仅仅是在第3个孩子身上。

然后，你应该删除那个:after，你想清除真正的孩子。

Answer 4

sabof是对的。但如果您使用display: inline-block代替float:left，那就太棒了。请参阅下面的例子。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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