user966582 user966582 - 6 days ago 6
CSS Question

CSS Clear after every nth-child

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.

enter image description here

Here's the code:

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


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

Answer

Actually it's

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