Haga que los divs tengan un ancho del 20% con relleno entre cada uno, pero no a la izquierda del primero ni a la derecha del último.

Question

Digamos que tengo este diseño para construir:

Suponiendo que el texto y la cuadrícula están dentro del mismo div y, por lo tanto, comparten un ancho de aproximadamente 990 px, ¿cómo puedo hacer dinámicamente que esta cuadrícula tenga columnas de igual ancho, sin anchos fijos?

Podría configurar cada uno div a width:20%, pero luego se alinearían uno al lado del otro en lugar de estar espaciados. http://jsfiddle.net/97H3P/

Podría configurar cada uno div a width: 20%, box-sizing: border-box, y padding: 0 20px, pero entonces habría un espacio de 20px entre el borde de las líneas y el borde de la primera y la última div. http://jsfiddle.net/97H3P/1/

Podría configurar cada uno div a box-sizing: border-box;, width: 20% y padding-right: 20px, y luego en el quinto div, establezca padding-right: 0;, pero luego el quinto div es más ancho que el resto. http://jsfiddle.net/97H3P/2/

Podría configurar los primeros cuatro divs de cada fila para box-sizing: border-box;, width:20.8%, el quinto a width: 16.8%, y luego padding-right: 20px para todos ellos, pero esa matemática solo funciona con un ancho de 990px. http://jsfiddle.net/97H3P/3/

¿Hay una mejor manera de hacer esto?No encuentro ninguna solución elegante.

Gracias.

Actualizar:Durante unos minutos estuve interesado en CSS3. column-count característica, pero luego me di cuenta de que solo funciona de arriba a abajo, no de izquierda a derecha, que es como necesito ordenar esto.

Answer 1

Aquí está un ejemplo que no es Boostrap que he esbozado rápidamente.

Aunque utiliza las clases Bootstrap.

El truco se consigue utilizando el position: relative y box-sizing: border-box

También responde un poco.

Answer 2

Deberías echarle un vistazo a flexbox. http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

¿Qué tal si utilizamos algunos divs adicionales como espaciadores? Violín

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%;
}