DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Wenn Sie eine genaue Anzahl von Spalten bei der Gestaltung eines mehrspaltigen Layouts benötigen, verwenden Sie column-count.
.lead {
column-count: 3;
}Basierend auf der Anzahl der Spalten verteilt der Browser den Inhalt gleichmäßig auf genau diese Anzahl von Spalten.
Diese Eigenschaft kann auch in der Kurzschreibweise für columns verwendet werden und kann in Verbindung mit column-width eingesetzt werden. Wenn beide Eigenschaften deklariert sind, ist column-count die maximale Anzahl von Spalten.
Werte
column-count kann auto oder eine Ganzzahl sein.
Verwenden Sie auto, wenn Sie auch column-width verwenden. Betrachten Sie es als eine Möglichkeit, dem Browser zu sagen, dass column-width die Führung übernehmen soll.
Die Ganzzahl, auch bekannt als Spaltenanzahl, muss größer oder gleich 0 sein.
Im Gegensatz zu column-width hält diese Eigenschaft die Anzahl der Spalten unabhängig von der Browserbreite. Das bedeutet, dass Sie, wenn Sie ein 5-Spalten-Layout auf Ihrem Mobiltelefon aufrufen, ein sehr gequetschtes 5-Spalten-Layout zum Navigieren haben werden. column-count funktioniert am besten in Verbindung mit column-width.
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+ | 81 | 3.2+ |
Vergessen Sie Ihre Präfixe nicht, wenn Sie kein Tool verwenden, das Ihnen dabei hilft.
Sind Sie sicher bezüglich der Browserunterstützung? Ich habe auf einer anderen Seite etwas anderes gesehen.
Ja, ziemlich sicher. Wir ziehen von caniuse.
https://caniuse.com/#feat=mdn-css_properties_column-count
Hat bei mir nicht funktioniert, vielleicht weil ich Normalize.css verwende? Mein Code
1
2
3
div.columns {
column-count: 3;
column-width: 33.3%;
column-gap: 1rem;
}
p {border:1px blue solid;}
Das scheint zu funktionieren! Hier ist eine Demo mit Ihrem Code: https://codepen.io/geoffgraham/pen/gOeGOWK