Die Eigenschaft column-fill steuert den Inhalt des Elements, wenn es in Spalten unterteilt ist. Der Inhalt kann ausgeglichen oder sequentiell gefüllt werden. Somit hat es zwei Werte: balance und auto. "Balance" ist der Standardwert. Der Inhalt ist gleichmäßig auf die Spalten verteilt. Wenn Spalten durch den Wert "auto" angegeben werden, nimmt der Inhalt den Raum, den er benötigt, ein.
| Anfangswert | balance |
| Gilt für | Multicol-Elemente |
| Geerbt | Nein |
| Animierbar | Nein |
| Version | CSS3 |
| DOM Syntax | object.style.columnFill = "balance"; |
Syntax
column-fill: auto | balance | balance-all | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.balance {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
}
</style>
</head>
<h2>Beispiel für die Eigenschaft column-fill</h2>
<body>
<p class="balance">
Das ist ein Text, der in mehrere Teile aufgeteilt ist.
Die CSS-Eigenschaft column-fill wird verwendet,
um die Inhalte gleichmäßig auf alle Bereiche zu verteilen.
</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| auto | Der Wert füllt die Spalten sequentiell aus. |
| balance | Der Wert verteilt den Inhalt gleichmäßig auf die einzelnen Spalten. Bei seitenbehafteten Media wird nur die letzte Seite ausgeglichen. |
| balance-all | Der Wert verteilt den Inhalt gleichmäßig auf die einzelnen Spalten. Bei seitenbezogenen Media sind alle Seiten ausgeglichen. |
| initial | Es stellt die Eigenschaft auf seinen Standardwert ein. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| 50.0 + | 12.0 + |
52.0 + 13 -moz- |
9.0+ | 37.0+ |
Übe dein Wissen
Welche Werte kann die CSS-Eigenschaft 'column-fill' annehmen und was bedeuten sie?
Richtig!
Falsch!