CSS Clear after every nth-child
Solution 1:
Actually it's
.item:nth-child(3n+1){
clear:left
}
Solution 2:
.item:nth-child(3n+1){
clear:left
}
Updated Fiddle
Solution 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.
Then, you should remove that :after, you want to clear the actual child.
Solution 4:
sabof is right. But It will be great if you use display: inline-block instead of float:left. Please see below for example.
.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>