CSS column-fill-Eigenschaft
Use CSS column-fill property to specify whether the columns will be filled in a balanced manner or not. Property Values: balance. Try examples.
Die column-fill-Eigenschaft definiert, ob Spalten gleichmäßig oder sequenziell gefüllt werden.
Die column-fill-Eigenschaft ist eine der CSS3-Eigenschaften.
Wenn eine Höhe für einen mehrspaltigen Container festgelegt ist, können Sie steuern, wie der Inhalt in die Spalten fließt. Es unterstützt zwei Werte: balance und auto. balance ist der Standardwert und teilt den Inhalt gleichmäßig auf die Spalten auf. Bei auto werden die Spalten sequenziell gefüllt, bis die Höhenbeschränkung erreicht ist.
| Anfangswert | balance |
|---|---|
| Anwendbar auf | Mehrspaltige Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.columnFill = "balance"; |
Syntax
column-fill: auto | balance | balance-all | initial | inherit;Beispiel für die column-fill-Eigenschaft mit dem Wert balance
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.balance {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="balance">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to spread the contents evenly across all the columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Ergebnis
Beispiel für die column-fill-Eigenschaft mit dem Wert auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.auto {
column-count: 3;
column-rule: 1px solid black;
column-fill: auto;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="auto">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to fill columns sequentially. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| auto | Füllt die Spalten sequenziell. |
| balance | Teilt den Inhalt gleichmäßig zwischen den Spalten auf. Bei Seitenmedien wird nur die letzte Seite ausgeglichen. |
| balance-all | Teilt den Inhalt gleichmäßig zwischen den Spalten auf. Bei Seitenmedien werden alle Seiten ausgeglichen. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Übung
Welche Funktion hat die 'column-fill'-Eigenschaft in CSS?