CSS-Eigenschaft column-fill

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+


Finden Sie das nützlich?

Ähnliche Artikel