Fazer uma galeria de ter 20% de largura, com estofamento entre cada um, mas não para a esquerda da primeira ou da direita da última

Question

Vamos dizer que eu tenho esse layout para construir:

Supondo que o texto e a grade são dentro do mesmo div, e os mesmos compartilhar uma largura de cerca de 990px, como posso dinamicamente fazer este grade tem igual colunas de largura, sem largura fixa?

Eu poderia definir cada div para width:20%, mas eles teriam de linha diretamente ao lado do outro, em vez de no espaço. http://jsfiddle.net/97H3P/

Eu poderia definir cada div para width: 20%, box-sizing: border-box, e padding: 0 20px, mas aí seria um 20px lacuna entre a borda das linhas e a borda da primeira e da última div. http://jsfiddle.net/97H3P/1/

Eu poderia configurar cada div para box-sizing: border-box;, width: 20% e padding-right: 20px, e , em seguida, no dia 5 div, conjunto padding-right: 0;, mas, em seguida, o quinto div é maior do que o resto. http://jsfiddle.net/97H3P/2/

Eu poderia definir o primeiro de quatro divs de cada linha para box-sizing: border-box;, width:20.8%, o quinto e width: 16.8%, e , em seguida, padding-right: 20px para todos eles, mas que a matemática só funciona no 990px largura. http://jsfiddle.net/97H3P/3/

Não há melhor maneira de fazer isso?Eu não posso encontrar qualquer solução elegante.

Obrigado.

Atualização:Por alguns minutos, eu estava interessado em CSS3 do column-count recurso, mas então eu percebi que não apenas de cima para baixo, e não da esquerda para a direita, que é como eu preciso deste ordenou.

Answer 1

Aqui não Boostrap exemplo, eu esbocei rapidamente.

Mesmo que ele usa o Bootstrap classes.

O truque é obtida usando-se o position: relative e box-sizing: border-box

Ele também é meio sensível.

Answer 2

Você deve ter um olhar para o flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Como sobre o uso de algumas divs como espaçadores? 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%;
}