I div hanno una larghezza del 20% con imbottitura tra ciascuno, ma non a sinistra del primo o a destra dell'ultimo

Question

Diciamo che ho questo layout da costruire:

Supponendo che il testo e la griglia siano all'interno dello stesso div, e quindi condividano una larghezza di circa 990px, come posso rendere dinamicamente questa griglia con colonne di larghezza uguale, senza larghezze fisse?

Potrei impostare ciascuno div per width:20%, ma poi si allineavano direttamente uno accanto all'altro invece di distanziati. http://jsfiddle.net/97H3P/

Potrei impostare ciascuno div per width: 20%, box-sizing: border-box, e padding: 0 20px, ma poi ci sarebbe uno spazio di 20px tra il bordo delle linee e il bordo del primo e dell'ultimo div. http://jsfiddle.net/97H3P/1/

Potrei impostare ogni div per box-sizing: border-box;, width: 20% e padding-right: 20px, e poi sul 5 ° div, set padding-right: 0;, ma poi il quinto div è più largo del resto. http://jsfiddle.net/97H3P/2/

Potrei impostare i primi quattro divs di ogni riga a box-sizing: border-box;, width:20.8%, il quinto a width: 16.8%, e poi padding-right: 20px a tutti loro, ma quella matematica funziona solo alla larghezza di 990px. http://jsfiddle.net/97H3P/3/

C'è un modo migliore per farlo?Non riesco a trovare una soluzione elegante.

Grazie.

Aggiornare:Per alcuni minuti, ero interessato a CSS3 column-count caratteristica, ma poi mi sono reso conto che fa solo dall'alto verso il basso, non da sinistra a destra, che è il modo in cui ho bisogno di questo ordinato.

Answer 1

Ecco un esempio non-Boostrap che ho abbozzato rapidamente.

Anche se utilizza le classi Bootstrap.

Il trucco si ottiene utilizzando il position: relative e box-sizing: border-box

È anche un po ' reattivo.

Answer 2

Dovresti dare un'occhiata a flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Che ne dici di usare alcuni div extra come distanziatori? Violino

HTML

<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>

CSS

div {
    background: #000;
    height: 200px;
    float: left;
    opacity: 0.2;
    width: 18%;
}

div.spacer{
    opacity: 1;
    width: 2.5%;
}