I am trying to find a quick and easy solution (either using CSS or jQuery) to hide the last row of floated elements if they are not even.
Take a look at this JS Fiddle example: http://jsfiddle.net/cohhvfjn/
There is an issue when resizing the HTML container. Sometimes, the last row of floated elements may have 3 items while the row above it has 4, and the same thing happens when it's resized further down so the last row has 1 item when the row above it has 2.
In essence, I want to be able to remove/hide that last row only if the number of items in it does not match the row above.
Could someone provide some assistance with this?
Below is the basic HTML code included in the JSFiddle:
<style>
.content {width:100%;}
.content .block {float:left;width:20%}
@media all and (max-width: 600px) {
.content .block {width:25%}
}
@media all and (max-width: 500px) {
.content .block {width:33.3%}
}
@media all and (max-width: 400px) {
.content .block {width:50%}
}
</style>
<div class="content">
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
</div>