Spaltenfüllung - CSS-Tricks

Inhaltsverzeichnis

Wenn Sie einem mehrspaltigen Element eine Höhe hinzufügen, können Sie steuern, wie der Inhalt die Spalten füllt. Der Inhalt kann nacheinander ausgeglichen oder gefüllt werden.

ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )

Diese Eigenschaft ist nur in Firefox verfügbar. Firefox gleicht den Inhalt automatisch in einem mehrspaltigen Layout mit eingeschränkter Höhe aus. Die anderen Browser füllen Spalten immer nacheinander, wenn eine Höhenbeschränkung festgelegt ist.

Damit sich Firefox wie die anderen Browser verhält, dh Spalten nacheinander füllen, können Sie festlegen column-fill: auto.

Werte

column-fillakzeptiert die Schlüsselwortwerte balanceund auto.

balancefüllt jede Spalte mit ungefähr der gleichen Menge an Inhalt, lässt jedoch nicht zu, dass die Spalten größer werden als die height. Möglicherweise werden die Spalten kürzer als die, heightwenn der Browser den Inhalt gleichmäßig horizontal verteilt.

autofüllt jede Spalte, bis sie das erreicht, heightund tut dies, bis der Inhalt ausgeht. In Anbetracht des Inhalts wird dieser Wert nicht unbedingt alle Spalten ausfüllen oder gleichmäßig ausfüllen.

Es ist so, als würde man Saft in Gläser gießen. Sie können eine gleiche Menge Saft in jedes Glas gießen und feststellen, dass Sie nicht jedes Glas bis zum Rand füllen ( balance). Alternativ können Sie ein Glas bis zum Rand füllen, bis es voll ist, und dies wiederholen, bis kein Saft mehr übrig ist. Infolgedessen enthalten die verbleibenden Gläser möglicherweise weniger oder keinen Saft ( auto).

Siehe das Beispiel zum Füllen von Stiftspalten (CSS-Tricks) von CSS-Tricks (@ css-Tricks) auf CodePen.

Browser-Unterstützung

Die column-fillSchlüsselwortwerte funktionieren speziell in Firefox. Sie haben im August 2014 nicht funktioniert, als dieser Almanach-Eintrag ursprünglich geschrieben wurde, aber beim erneuten Testen im August 2015 (Chrome 44). Während dieses Tests scheint es, dass eine dynamische Änderung des Werts nicht erforderlich wäre. Sie mussten ein Relayout erzwingen.

Browserunterstützung für mehrspaltiges Layout im Allgemeinen: