CSS: gestire lo spazio orizzontale degli elementi inline-block con jQuery

I box CSS di tipo inline-block funzionano come normali elementi inline quando si tratta della gestione del loro spazio orizzontale. Tendono infatti a rimanere sulla stessa riga finché non raggiungono il limite del loro blocco contenitore. Quando ciò accade, finiscono sulla riga successiva seguendo un ordine casuale. Possiamo controllare questo comportamento con jQuery.

Abbiamo i seguenti box:


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

con i seguenti stili:


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

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

Normalmente avremmo quattro box sulla prima riga e due box sulla seconda. Con jQuery possiamo aggiungere un'interruzione di riga (br) dopo ogni elemento pari in modo da avere due elementi per riga:


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