Oszlopkitöltés - CSS-trükkök

Ha magasságot ad egy többoszlopos elemhez, szabályozhatja, hogy a tartalom hogyan töltse ki az oszlopokat. A tartalom lehet kiegyensúlyozott vagy egymás után tölthető.

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

Ez a tulajdonság csak a Firefoxban érhető el. A Firefox automatikusan egyensúlyba hozza a tartalmat magasságkorlátozott többoszlopos elrendezésben. A többi böngésző mindig egymás után tölti ki az oszlopokat, ha magassági korlátot adnak nekik.

Beállíthatja, hogy a Firefox úgy viselkedjen, mint a többi böngésző, vagyis egymás után töltse ki az oszlopokat column-fill: auto.

Értékek

column-fillelfogadja a kulcsszó értékeit balanceés auto.

balanceminden oszlopot körülbelül ugyanannyi tartalommal tölt meg, de nem engedi, hogy az oszlopok magasabbak legyenek, mint a height. Előfordulhat, hogy az oszlopok rövidebbek lesznek, heightmint a böngésző, mivel a tartalom vízszintesen egyenletesen oszlik el a tartalmat.

autominden oszlopot kitölt, amíg el nem éri a, heightés ezt addig teszi, amíg el nem fogy a tartalma. A tartalmat tekintve ez az érték nem feltétlenül tölti ki az összes oszlopot, és nem is tölti ki őket egyenletesen.

Ez olyan, mintha poharat öntene lébe. Minden pohárba egyenlő mennyiségű levet tölthet, és megállapíthatja, hogy nem tölti fel az egyes poharakat a tetejéig ( balance). Alternatív megoldásként tölthet egy poharat a tetejéig, amíg meg nem telik, és ismételje meg ezt addig, amíg nem marad lé. Ennek eredményeként a fennmaradó poharakban kevesebb lehet vagy egyáltalán nincs lé ( auto).

Lásd a Pen oszlopkitöltési példáját (CSS-trükkök) CSS-Tricks-től (@ css-tricks) a CodePen-en.

Böngésző támogatás

A column-fillkulcsszóértékek kifejezetten a Firefoxban működnek. Nem működtek 2014 augusztusában, amikor ezt az Almanac-bejegyzést eredetileg írták, de 2015 augusztusában újra tesztelve (Chrome 44). A tesztelés során úgy tűnik, hogy az érték dinamikus megváltoztatása nem tartana be, kényszeríteni kellett egy közvetítést.

Böngésző támogatása a több oszlopos elrendezéshez általában: