Stellen Sie sicher, dass Divs eine Breite von 20% mit Auffüllungen dazwischen haben, aber nicht links vom ersten oder rechts vom letzten
-
02-01-2020 - |
Frage
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 div
s 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.
Lösung
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.
Andere Tipps
Sie sollten sich Flexbox ansehen http://css-tricks.com/snippets/css/a-guide-to-flexbox/
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%;
}