Popunjavanje stupaca - CSS-trikovi

Sadržaj

Kada dodate visinu elementu s više stupaca, možete kontrolirati kako sadržaj ispunjava stupce. Sadržaj se može uravnotežiti ili ispuniti uzastopno.

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

Ovo je svojstvo dostupno samo u Firefoxu. Firefox će automatski uravnotežiti sadržaj u rasporedu više stupaca ograničenom visinom. Ostali preglednici uvijek će redovno popunjavati stupce kada im se dodijeli ograničenje visine.

Možete postaviti da se Firefox ponaša poput ostalih preglednika, odnosno da se sekvence popunjavaju sekvencijalno column-fill: auto.

Vrijednosti

column-fillprihvaća vrijednosti ključnih riječi balancei auto.

balanceispunit će svaki stupac s približno istom količinom sadržaja, ali neće dopustiti da stupci rastu više od height. Mogli biste otkriti da će se stupci pojaviti kraći od onih heightdok preglednik distribuira sadržaj ravnomjerno vodoravno.

autoispunjavat će svaki stupac dok ne dođe do heighti to dok to ne ostane bez sadržaja. S obzirom na sadržaj, ova vrijednost neće nužno ispuniti sve stupce niti ih ispuniti ravnomjerno.

To je poput sipanja soka u čaše. U svaku čašu možete uliti jednaku količinu soka i utvrditi da svaku čašu ne napunite do vrha ( balance). Možete i napuniti čašu do vrha dok se ne napuni i ponavljati dok ne ostane sok. Kao rezultat, preostale čaše mogu sadržavati manje ili nimalo soka ( auto).

Pogledajte primjer ispunjavanja stupca olovke (CSS-trikovi) tvrtke CSS-trikovi (@ css-trikovi) na CodePenu.

Podrška preglednika

Vrijednosti column-fillključnih riječi posebno rade u Firefoxu. Nisu radili u kolovozu 2014. kada je izvorno napisan ovaj članak o Almanahu, ali rade kad su ponovno testirani u kolovozu 2015. (Chrome 44). Tijekom tog testiranja čini se da dinamička promjena vrijednosti ne bi trebala, morali ste prisiliti relej.

Podrška preglednika za izgled više stupaca općenito: