Html CSS 在每个第 n 个孩子之后清除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22013925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Clear after every nth-child
提问by user966582
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 htmlmarkup, 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标记的情况下清除每个第 3 个项目，以便第 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;
}
回答by sabof
Actually it's
其实是
.item:nth-child(3n+1){
clear:left
}
回答by Kawinesh SK
回答by linkyndy
You should use nth-child(3n+1)so that it happens at eachchild following a child multiple by 3, not only at the first 3rd child.
您应该使用nth-child(3n+1)它，以便它发生在每个孩子后面乘以 3 的孩子身上，而不仅仅是在第一个第 3 个孩子身上。
Then, you should remove that :after, you want to clear the actual child.
然后，你应该删除那个:after，你想清除实际的孩子。
回答by w3debugger
sabofis right. But It will be great if you use display: inline-blockinstead 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>回答by Dirk Wolke
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>回答by Deepu Sasidharan
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.
这些只需要。
回答by Siddharth Nagar
Use below code
使用下面的代码
.item:nth-child(4){clear:both;}
