CSS column-fill-Eigenschaft

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

css

column-fill: auto | balance | balance-all | initial | inherit;

Beispiel für die column-fill-Eigenschaft mit dem Wert `balance`

html

<!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>

Try it Yourself »

Ergebnis

CSS column-fill Property

Beispiel für die column-fill-Eigenschaft mit dem Wert `auto`

html

<!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>

Try it Yourself »

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

Welche Funktion hat die 'column-fill'-Eigenschaft in CSS?

Die 'column-fill'-Eigenschaft in CSS wird verwendet, um anzugeben, wie die Spalten gefüllt werden.Die 'column-fill'-Eigenschaft in CSS wird verwendet, um die Farbe der Spalten anzugeben.Die 'column-fill'-Eigenschaft in CSS wird verwendet, um die Breite der Spalten anzugeben.Die 'column-fill'-Eigenschaft legt fest, ob die Spaltenkästen sequenziell gefüllt werden oder den Inhalt gleichmäßig in allen Spalten ausgleichen.

CSS column-fill-Eigenschaft ​

Syntax ​

Beispiel für die column-fill-Eigenschaft mit dem Wert balance ​

Ergebnis ​

Beispiel für die column-fill-Eigenschaft mit dem Wert auto ​

Werte ​