Polnjenje stolpca - CSS-triki

Kazalo

Ko elementu z več stolpci dodate višino, lahko nadzirate, kako vsebina polni stolpce. Vsebino je mogoče uravnotežiti ali zapolniti zaporedno.

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

Ta lastnost je na voljo samo v Firefoxu. Firefox bo samodejno uravnotežil vsebino v postavitvi več stolpcev z višino. Drugi brskalniki bodo stolpce vedno izpolnjevali zaporedno, če jim je dodeljena višinska omejitev.

Če želite, da se Firefox obnaša kot drugi brskalniki, to je zaporedno izpolnjevanje stolpcev, lahko nastavite column-fill: auto.

Vrednote

column-fillsprejema vrednosti ključnih besed balancein auto.

balancebo vsak stolpec zapolnil z približno enako količino vsebine, vendar ne bo omogočil, da stolpci rastejo višje od height. Morda boste ugotovili, da bodo stolpci prikazani krajši od, heightsaj brskalnik vsebino distribuira enakomerno vodoravno.

autobo polnil vsak stolpec, dokler ne pride do, heightin to, dokler ne zmanjka vsebine. Glede na vsebino ta vrednost ne bo nujno izpolnila vseh stolpcev niti enakomerno.

To je nekako tako kot nalivanje soka v kozarce. V vsak kozarec lahko vlijete enako količino soka in ugotovite, da vsakega kozarca ne napolnite do vrha ( balance). Lahko pa napolnite kozarec do vrha, dokler ni napolnjen, in to ponavljajte, dokler ne ostane sok. Posledično lahko preostali kozarci vsebujejo manj ali nič soka ( auto).

Oglejte si primer polnjenja stolpca Pen (CSS-Tricks) avtorja CSS-Tricks (@ css-tricks) na CodePen.

Podpora za brskalnik

Vrednosti column-fillključnih besed posebej delujejo v Firefoxu. Avgusta 2014, ko je bil ta vnos v Almanahu prvotno napisan, niso delovali, vendar so ga ponovno preizkusili avgusta 2015 (Chrome 44). Med preizkušanjem se zdi, da dinamičnega spreminjanja vrednosti ne bi bilo treba prisiliti sprožitve.

Podpora brskalnika za postavitev več stolpcev na splošno: