CSS -column-fill- Eigenschaft
Beispiel
Geben Sie an, wie Spalten gefüllt werden sollen:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die column-fillEigenschaft gibt an, wie Spalten gefüllt werden, egal ob ausgeglichen oder nicht.
Tipp: Wenn Sie einem mehrspaltigen Element eine Höhe hinzufügen, können Sie steuern, wie der Inhalt die Spalten füllt. Der Inhalt kann ausgeglichen oder sequentiell befüllt werden.
| Standardwert: | Gleichgewicht |
|---|---|
| Vererbt: | Nein |
| Animierbar: | Nein. Lesen Sie mehr über animierbare |
| Ausführung: | CSS3 |
| JavaScript-Syntax: | Objekt .style.columnFill="auto" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -moz- geben die erste Version an, die mit einem Präfix funktioniert hat.
| Property | |||||
|---|---|---|---|---|---|
| column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
CSS-Syntax
column-fill: balance|auto|initial|inherit;
Eigenschaftswerte
| Value | Description |
|---|---|
| balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
| auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
| 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: columnFill-Eigenschaft