I am attempting to create a list of elements that float and clear at the beginning of each new row because the height of the boxes is unknown. We want to be able to hide certain boxes based on category, like so:
$('nav a').on('click', function(e) {
e.preventDefault();
var show = $(this).data('show');
if(show == 'all') {
$('div').show();
} else {
$('div').hide();
$('.' + show).show();
}
});* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
article {
width: 400px;
}
div {
width: 100px;
border: 1px solid black;
float: left;
padding: 10px;
margin-bottom: 10px;
}
.category-b {
background-color: #eee;
}
div:nth-child(4n+5) {
clear: both;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<a data-show="all" href="#">All</a> /
<a data-show="category-a" href="#">Category A</a> /
<a data-show="category-b" href="#">Category B</a>
</nav>
<article>
<div class="category-b">hello</div>
<div class="category-a">hello world folk</div>
<div class="category-a">lorem ipsum dolores</div>
<div class="category-a">bonjour Mr</div>
<div class="category-b">Katarina vs Alistar</div>
<div class="category-a">hello</div>
...
http://jsfiddle.net/Pik_at/Lwyte7sm/
The issue arises when selecting a category as the nth-child selector also counts hidden boxes with display:none, causing the layout to break. Any suggested CSS solutions would be greatly appreciated.