DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Wenn Sie einem mehrspaltigen Element eine Höhe hinzufügen, können Sie steuern, wie der Inhalt die Spalten füllt. Der Inhalt kann ausbalanciert oder sequenziell 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 in einem höhenbeschränkten Mehrspaltenlayout automatisch aus. Die anderen Browser füllen die Spalten bei einer Höhenbeschränkung immer sequenziell.
Um Firefox dazu zu bringen, sich wie die anderen Browser zu verhalten, d. h. Spalten sequenziell zu füllen, können Sie column-fill: auto setzen.
Werte
column-fill akzeptiert die Schlüsselwortwerte balance und auto.
balance füllt jede Spalte mit ungefähr der gleichen Menge Inhalt, erlaubt aber nicht, dass die Spalten höher als die height werden. Möglicherweise stellen Sie fest, dass die Spalten kürzer als die height sind, da der Browser den Inhalt horizontal gleichmäßig verteilt.
auto füllt jede Spalte, bis sie die height erreicht, und tut dies, bis der Inhalt aufgebraucht ist. Angesichts des Inhalts füllt dieser Wert nicht unbedingt alle Spalten und auch nicht gleichmäßig.
Es ist wie das Ausgießen von Saft in Gläser. Sie können in jedes Glas die gleiche Menge Saft gießen und feststellen, dass Sie jedes Glas nicht 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 können die verbleibenden Gläser weniger oder keinen Saft enthalten (auto).
Siehe den Pen column-fill example [CSS-Tricks] von CSS-Tricks (@css-tricks) auf CodePen.
Verwandte Eigenschaften
Additional Resources
Browser-Unterstützung
Die Schlüsselwortwerte von column-fill funktionieren speziell in Firefox. Sie funktionierten im August 2014 nicht, als dieser Almanac-Eintrag ursprünglich geschrieben wurde, aber als er im August 2015 erneut getestet wurde (Chrome 44), schon. Während dieses Tests schien es, dass das dynamische Ändern des Werts nicht funktionierte, man musste ein Neulayout erzwingen.
Browser-Unterstützung für Mehrspaltenlayout im Allgemeinen
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Vergessen Sie nicht Ihre Präfixe!
Laut CSS3 Spec ist
column-fill: balanceder initiale Wert. Also ist Firefox der einzige Browser, der ihn richtig behandelt (im September 2015).An Paul Radzkov und alle, die an Open Source und Teilen glauben. Dank Websites wie dieser und Mitwirkenden wie Ihnen, Paul, die unerfahrenen Webdesignern wie mir helfen, kann ich so viel lernen, um mich zu verbessern. Es ist erstaunlich, die riesige Menge an Wissen, die Leute wie Sie teilen. Wir, die Webdesigner, die wie Sie sein wollen, nehmen immer mehr (saugen das Wissen auf), aber ich wage zu behaupten, dass Sie dafür viel Dank erhalten. Ich habe kein Geld; alles, was ich habe, ist meine Wertschätzung und mein Dank für alles, was Sie, css-tricks und alle seine Mitwirkenden auf Websites wie dieser tun. Was am beeindruckendsten ist, dass Geeks und kluge Leute wie Sie alle sozialen Stereotypen widerlegen, dass Sie keine Emotionen haben. Aber es ist genau das Gegenteil, denn die reine Emotion, die Sie, Paul und andere hier, gezeigt haben, ist die Fähigkeit, Ihr Wissen so frei und bedingungslos zu teilen. Ich benutze Websites wie diese schon lange genug und dachte, es sei an der Zeit, Ihnen und allen wie Ihnen zu danken.
Nochmals vielen Dank für alles, was Sie tun.
–Mit freundlichen Grüßen Gene Dangerfield
Ich habe Spalten mit ungerader Höhe und teile sie in 3 Spalten. Wenn die erste Spalte eine große Höhe hat, sollten die anderen Elemente in den restlichen Spalten fließen, was nicht geschieht. Was ist hier falsch? https://jsfiddle.net/dvinod_eluru/Lbm5pe22/. Display Inline-block fließt nicht in die nächste Spalte.
Ich habe das Spaltenausrichtungsproblem in Chrome behoben, anstatt des ersten Kindes, display: inline-block für die zweiten Kindelemente. Das bedeutet div(Elternteil) > div(erstes Kind) > div(zweites Kind)