Sarakkeen täyttö - CSS-temppuja

Sisällysluettelo

Kun lisäät korkeuden monisarakkeiseen elementtiin, voit hallita, miten sisältö täyttää sarakkeet. Sisältö voidaan tasapainottaa tai täyttää peräkkäin.

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

Tämä ominaisuus on käytettävissä vain Firefoxissa. Firefox tasapainottaa sisällön automaattisesti korkeusrajoitetussa monisarakkeisessa asettelussa. Muut selaimet täyttävät sarakkeet aina peräkkäin, kun niille annetaan korkeusrajoituksia.

Voit asettaa Firefoxin käyttäytymään muiden selainten tavoin eli täyttää sarakkeet peräkkäin column-fill: auto.

Arvot

column-fillhyväksyy avainsanojen arvot balanceja auto.

balancetäyttää jokaisen sarakkeen suunnilleen samalla määrällä sisältöä, mutta ei salli sarakkeiden kasvaa height. Saatat huomata, että sarakkeet ovat lyhyempiä kuin, heightkun selain jakaa sisällön tasaisesti vaakasuoraan.

autotäyttää jokaisen sarakkeen, kunnes se saavuttaa, heightja tekee tämän, kunnes sen sisältö loppuu. Sisältö huomioon ottaen tämä arvo ei välttämättä täytä kaikkia sarakkeita eikä täytä niitä tasaisesti.

Se on tavallaan kuin kaada mehua lasiin. Voit kaataa yhtä paljon mehua jokaiseen lasiin ja huomata, että et täytä kutakin lasia alkuun ( balance). Vaihtoehtoisesti voit täyttää lasin alkuun, kunnes se on täynnä, ja toista tämä, kunnes mehua ei ole jäljellä. Tämän seurauksena jäljellä olevissa lasissa voi olla vähemmän tai ei ollenkaan mehua ( auto).

Katso CodeSen-sovelluksen CSS-Tricks (@ css-tricks) -kynän sarakkeen täyttöesimerkki (CSS-Tricks).

Selaimen tuki

column-fillAvainsanan arvot nimenomaan toimi Firefoxissa. Ne eivät toimineet elokuussa 2014, jolloin tämä Almanac-merkintä kirjoitettiin alun perin, mutta toimivat, kun ne testattiin uudelleen elokuussa 2015 (Chrome 44). Testauksen aikana näyttää siltä, että arvon muuttaminen dynaamisesti ei vie, sinun oli pakotettava välitys.

Selaimen tuki monisarakkeiselle asettelulle yleensä: