Stellen Sie sicher, dass Divs eine Breite von 20% mit Auffüllungen dazwischen haben, aber nicht links vom ersten oder rechts vom letzten

Question

Nehmen wir an, ich habe dieses Layout zu erstellen:

Angenommen, der Text und das Raster befinden sich innerhalb desselben div und haben daher eine Breite von etwa 990 Pixel. Wie kann ich dieses Raster dynamisch mit Spalten gleicher Breite ohne feste Breiten erstellen?

Ich könnte jeden einstellen div zu width:20%, aber dann würden sie sich direkt nebeneinander aufstellen, anstatt voneinander getrennt zu sein. http://jsfiddle.net/97H3P/

Ich könnte jeden einstellen div zu width: 20%, box-sizing: border-box, und padding: 0 20px, aber dann würde es eine Lücke von 20 Pixel zwischen dem Rand der Linien und dem Rand des ersten und letzten geben div. http://jsfiddle.net/97H3P/1/

Ich könnte jeden einrichten div zu box-sizing: border-box;, width: 20% und padding-right: 20px, und dann am 5. div, setze padding-right: 0;, aber dann ist das fünfte Div breiter als der Rest. http://jsfiddle.net/97H3P/2/

Ich könnte die ersten vier einstellen divs jeder Zeile zu box-sizing: border-box;, width:20.8%, der fünfte bis width: 16.8%, und dann padding-right: 20px für alle von ihnen, aber diese Mathematik funktioniert nur bei der Breite von 990 Pixel. http://jsfiddle.net/97H3P/3/

Gibt es einen besseren Weg, dies zu tun?Ich kann keine elegante Lösung finden.

Danke.

Update:Für ein paar Minuten interessierte ich mich für CSS3S column-count feature, aber dann wurde mir klar, dass es nur von oben nach unten funktioniert, nicht von links nach rechts, so brauche ich das bestellt.

Answer 1

Hier ist ein Nicht-Boostrap-Beispiel, das ich schnell skizziert habe.

Obwohl es die Bootstrap-Klassen verwendet.

Der Trick wird erreicht, indem der position: relative und box-sizing: border-box

Es ist auch irgendwie reaktionsschnell.

Answer 2

Sie sollten sich Flexbox ansehen http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Wie wäre es mit ein paar zusätzlichen Divs als Abstandshalter? Geige

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