Faire en sorte que les divs aient une largeur de 20 % avec un remplissage entre chacun, mais pas à gauche du premier ni à droite du dernier

Question

Disons que j'ai cette mise en page à construire :

En supposant que le texte et la grille se trouvent dans le même div et partagent donc une largeur d'environ 990 pixels, comment puis-je faire en sorte que cette grille ait dynamiquement des colonnes de largeur égale, sans largeurs fixes ?

Je pourrais définir chacun div à width:20%, mais ensuite ils s'aligneraient directement les uns à côté des autres au lieu d'être espacés. http://jsfiddle.net/97H3P/

Je pourrais définir chacun div à width: 20%, box-sizing: border-box, et padding: 0 20px, mais il y aurait alors un écart de 20 pixels entre le bord des lignes et le bord du premier et du dernier div. http://jsfiddle.net/97H3P/1/

Je pourrais configurer chacun div à box-sizing: border-box;, width: 20% et padding-right: 20px, puis à la 5ème division, définissez padding-right: 0;, mais alors la cinquième division est plus large que les autres. http://jsfiddle.net/97H3P/2/

Je pourrais définir les quatre premiers divs de chaque ligne à box-sizing: border-box;, width:20.8%, le cinquième à width: 16.8%, et puis padding-right: 20px à tous, mais ce calcul ne fonctionne qu'à la largeur de 990 px. http://jsfiddle.net/97H3P/3/

Y a-t-il une meilleure manière de faire cela?Je ne trouve aucune solution élégante.

Merci.

Mise à jour:Pendant quelques minutes, je me suis intéressé aux CSS3 column-count fonctionnalité, mais j'ai ensuite réalisé que cela ne fonctionnait que de haut en bas, pas de gauche à droite, c'est ainsi que j'ai besoin de cette commande.

Answer 1

Voici un exemple non-Boostrap que j'ai esquissé rapidement.

Même s'il utilise les classes Bootstrap.

L'astuce est réalisée en utilisant le position: relative et box-sizing: border-box

Il est également plutôt réactif.

Answer 2

Tu devrais jeter un oeil à flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Que diriez-vous d'utiliser des divs supplémentaires comme espaceurs ? Violon

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