columns
Try it
Die CSS Eigenschaft columns
ist eine Kurzform Eigenschaft, die es erlaubt, sowohl die column-width
als auch die column-count
Eigenschaft auf einmal zu setzen.
Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und senden Sie uns eine Pull-Anfrage.
Syntax
/* Column width */
columns: 18em;
/* Column count */
columns: auto;
columns: 2;
/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;
/* Global values */
columns: inherit;
columns: initial;
columns: unset;
Die Eigenschaft columns
kann mit einem oder mit zwei von den unten aufgelisteten Werten in beliebiger Reihenfolge spezifiziert.
Werte
<column-width>
- The ideal column width, defined as a
<length>
or the keywordauto
. The actual width may be wider or narrower to fit the available space. Seecolumn-width
. <column-count>
- The ideal number of columns into which the element's content should be flowed, defined as an
<integer>
or the keywordauto
. If neither this value nor the column's width areauto
, it merely indicates the maximum allowable number of columns. Seecolumn-count
.
Formale Definition
Initialwert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | Blockcontainer außer Tabellen umgebende Boxen |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
Beispiel
Sets drei gleiche Spalten
HTML
<p class="content-box">
This is a bunch of text split into three columns
using the CSS `columns` property. The text
is equally distributed over the columns.
</p>
CSS
.content-box {
columns: 3 auto;
}
Ergebnis
Spezifikation
Spezifikation | Status | Kommentar |
---|---|---|
CSS Multi-column Layout Module Die Definition von 'columns' in dieser Spezifikation. |
Arbeitsentwurf | Ursprüngliche Definition |
Browser Kompatibilität
BCD tables only load in the browser