DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Wenn Sie Ihre Spalten auf eine bestimmte Breite bringen möchten, verwenden Sie column-width.
section {
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}Der Browser berechnet, wie viele Spalten mit *mindestens* dieser Breite in den verfügbaren Platz passen. Betrachten Sie column-width als einen Vorschlag für die Mindestbreite des Browsers.
column-width ist eine flexible Eigenschaft. Sobald der Browser nicht mindestens 2 Spalten mit Ihrer angegebenen Breite unterbringen kann, stoppen die Spalten und werden zu einer einzigen Spalte.
Diese Eigenschaft wird auch in der Kurzschreibweise für columns verwendet und kann in Verbindung mit column-count eingesetzt werden. Wenn beide Eigenschaften deklariert sind, ist column-count die maximale Anzahl von Spalten.
Werte
Sie können column-width auf auto oder eine Länge setzen.
Verwenden Sie auto, wenn Sie auch column-count verwenden oder wenn Sie die Eigenschaft deaktivieren müssen. Betrachten Sie es als eine Möglichkeit, dem Browser mitzuteilen, dass column-count die Führung übernehmen soll.
Um die Breite der Spalten anzugeben, verwenden Sie eine Länge größer als (oder gleich) 0. Sie können jede CSS-Einheit außer Prozent verwenden.
Verwandte Eigenschaften
Additional Resources
Browser-Unterstützung
Mehrspalten-Layout-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Vergessen Sie nicht Ihre Präfixe!
Spaltenbreite auto funktioniert in Webkit nicht. Ich habe es nicht in FF getestet.
Habe gerade den Hinweis gesehen, wie viele Spalten angegeben werden müssen, wenn man auto verwendet.
Hallo,
In Ihrem Code Pen Beispiel (http://codepen.io/katydecorah/pen/9b18945fdfdc4d508bbcc336b2034eed) gibt es ein Problem beim Vergrößern.
Einige Teile des Kastens erscheinen oben auf wenigen Spalten.
Gibt es einen Grund?
Mehrspalten-Layout-Unterstützung
Chrome: nichts!!!!
Setzen Sie das a.tag-Element auf display: inline-block statt block. Hat mein Problem unter Chrome gelöst.
Beispiele: http://codepen.io/mdgDesign/pen/qqLjbd
Merci!
Spalten werden falsch implementiert. Man kann nur die minimale (nicht die maximale) Spaltenbreite wählen. Der Benutzer muss manuell vom Ende einer Textspalte zum Anfang der nächsten scrollen, was das Lesen langer Texte erschwert.
Ich möchte, dass sich die Spalten intelligent ändern.
Wenn es sehr wenig Text gibt, möchte ich nur eine Spalte (mit einer festen vorgegebenen Breite und optional horizontal zentriert und optional vertikal zentriert), bis die Viewport-Höhe erreicht ist. Dann gibt es eine Spalte, die die gesamte verfügbare Höhe einnimmt. Dann möchte ich zwei Spalten, die erste so hoch wie der Viewport, die zweite wächst wie die erste.
Wenn die gesamte Breite des Viewports mit einer oder mehreren Spalten überschritten wird, möchte ich das gleiche Spaltlayout fortsetzen, aber mit einer horizontalen Scrollleiste.
Dieses Design unterstützt das einfache Lesen von Texten.