CSS在第n个子代后清除

I have multiple items with same width inside a container. Because of different heights of the elements, there is problem with the alignment, you can see in image below.

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

I want to clear after every 3rd item without changing the html markup, so that the 4th item goes to the next row. I'm trying to add nth-child(3):after, but does not seem to work.

我希望在每个第三项之后清除，而不更改html标记，这样第4项就会转到下一行。我试着加上nth-child(3):after，但似乎不起作用。

Here's the code:

这是代码:

HTML:

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:

CSS:

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

Demo: http://jsfiddle.net/KPXyw/

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

7 个解决方案

#1

Actually it's

实际上它是

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

#2

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

Updated Fiddle

更新的小提琴

#3

You should use nth-child(3n+1) so that it happens at each child following a child multiple by 3, not only at the first 3rd child.

您应该使用nth-child(3n+1)，这样它就会发生在每个孩子后面，而不是第3个孩子后面。

Then, you should remove that :after, you want to clear the actual child.

然后，您应该删除它:after，您希望清除实际的子节点。

#4

sabof is right. But It will be great if you use display: inline-block instead of float:left. Please see below for example.

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>

#5

You can use:

您可以使用:

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

See below:

见下文:

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

#6

try this its working

试试这个工作

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

these only need.

这些只需要。

#7

Use below code

使用下面的代码

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