CSS -Spaltenbreite- Eigenschaft
Beispiel
Geben Sie an, dass die Spaltenbreite 100 Pixel betragen soll:
div
{
column-width: 100px;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die column-width
Eigenschaft gibt die Spaltenbreite an.
Die Anzahl der Spalten ist die Mindestanzahl von Spalten, die erforderlich ist, um den gesamten Inhalt des Elements anzuzeigen.
column-width
ist eine flexible Eigenschaft. Stellen Sie sich
column-width
das als Vorschlag für die Mindestbreite des Browsers vor. Sobald der Browser nicht mindestens zwei Spalten mit Ihrer angegebenen Breite einpassen kann, stoppen die Spalten und fallen in eine einzelne Spalte.
Standardwert: | Auto |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.columnWidth="100px" |
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 | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
CSS-Syntax
column-width: auto|length|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
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: Eigenschaft columnWidth