CSS- Spalten -Eigenschaft
Beispiel
Geben Sie die Mindestbreite für jede Spalte und die maximale Spaltenanzahl an:
div
{
columns: 100px 3;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die columns
Eigenschaft ist eine abgekürzte Eigenschaft für:
Der Spaltenbreitenteil definiert die minimale Breite für jede Spalte, während der Spaltenanzahlteil die maximale Anzahl von Spalten definiert. Durch die Verwendung dieser Eigenschaft wird das mehrspaltige Layout bei schmalen Browserbreiten automatisch in eine einzelne Spalte zerlegt, ohne dass Medienabfragen oder andere Regeln erforderlich sind.
Standardwert: | Auto Auto |
---|---|
Vererbt: | Nein |
Animierbar: | Ja, siehe einzelne Eigenschaften . Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.columns="100px 3" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit- oder -moz- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
columns | 50.0 4.0 -webkit- |
10.0 | 52.0 9.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
CSS-Syntax
columns: auto|column-width column-count|initial|inherit;
Eigenschaftswerte
Value | Description |
---|---|
auto | Default value. Sets both the column-width and column-count to "auto" |
column-width | Defines the minimum width for each column |
column-count | Defines the maximum number of columns |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Teilen Sie den Text in einem <div>-Element in drei Spalten auf:
div
{
column-count: 3;
}
Beispiel
Geben Sie einen Abstand von 40 Pixeln zwischen den Spalten an:
div
{
column-gap: 40px;
}
Beispiel
Geben Sie die Breite, den Stil und die Farbe der Linie zwischen den Spalten an:
div
{
column-rule: 4px double #ff00ff;
}
Verwandte Seiten
CSS-Tutorial: CSS für mehrere Spalten
HTML-DOM-Referenz: Spalteneigenschaft