I want to stack divs next to each other and break the divs after three child elements.
Example HTML:
<div class="wrap">
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
</div>
.wrap a {
float:left;
}
.wrap a:nth-child(4n) {
clear:left;
}
:nth-child
Use nth-child(3n+1)
:
.wrap a {
float:left;
}
.wrap a:nth-child(3n+1) {
clear:left;
}
<div class="wrap">
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
<a> hello </a>
</div>