column-count
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
Die column-count
CSS Eigenschaft teilt den Inhalt eines Elements in die angegebene Anzahl von Spalten auf.
Probieren Sie es aus
Syntax
/* Keyword value */
column-count: auto;
/* <integer> value */
column-count: 3;
/* Global values */
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: revert-layer;
column-count: unset;
Werte
auto
-
Die Anzahl der Spalten wird durch andere CSS-Eigenschaften bestimmt, wie z.B.
column-width
. <integer>
-
Ist eine strikt positive
<integer>
, die die ideale Anzahl der Spalten beschreibt, in die der Inhalt des Elements aufgeteilt wird. Wenn auchcolumn-width
auf einen anderen Wert alsauto
gesetzt ist, gibt es lediglich die maximal erlaubte Anzahl von Spalten an.
Formale Definition
Anfangswert | auto |
---|---|
Anwendbar auf | Blockcontainer außer Tabellen umgebende Boxen |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Integer |
Formale Syntax
column-count =
auto |
<integer [1,∞]>
Beispiele
Einen Absatz in drei Spalten aufteilen
HTML
<p class="content-box">
This is a bunch of text split into three columns using the CSS
<code>column-count</code>
property. The text is equally distributed over the columns.
</p>
CSS
.content-box {
column-count: 3;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Multi-column Layout Module Level 1 # cc |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
column-count | ||||||||||||
auto |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
Siehe auch
column-width
,columns
Kurzschreibweisecolumn-rule-color
,column-rule-style
,column-rule-width
,column-rule
Kurzschreibweise- Erlernen: Mehrspalten-Layout (Learn Layout)
- Grundkonzepte des Multicol