jQuery: inline-block clear

by gabrieleromanato

HTML

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

#wrapper {
    width: 600px;
    margin: 2em auto;
    border: thick solid;
    background: silver;
}

div.box {
    width: 100px;
    height: 100px;
    margin: 1em;
    display: inline-block;
    background: gray;
}

JavaScript

$('div.box:nth-child(even)', '#wrapper').each(function() {
    var $box = $(this);
    $('<br/>').insertAfter($box);
});