Kolonnas aizpildīšana - CSS-triki

Satura rādītājs

Pievienojot augstumu vairāku kolonnu elementam, varat kontrolēt, kā saturs aizpilda kolonnas. Saturu var sabalansēt vai aizpildīt secīgi.

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

Šis īpašums ir pieejams tikai pārlūkprogrammā Firefox. Firefox automātiski līdzsvaros saturu augstuma ierobežotā vairāku kolonnu izkārtojumā. Pārējās pārlūkprogrammas vienmēr aizpildīs kolonnas secīgi, ja tām ir noteikts augstuma ierobežojums.

Lai Firefox rīkotos tāpat kā citas pārlūkprogrammas, tas ir, secīgi aizpildiet kolonnas, varat iestatīt column-fill: auto.

Vērtības

column-fillpieņem atslēgvārda vērtības balanceun auto.

balanceaizpildīs katru kolonnu ar aptuveni tādu pašu satura daudzumu, bet neļaus kolonnām augt garākām par height. Iespējams, atklāsiet, ka kolonnas būs īsākas nekā tās, heightjo pārlūkprogramma vienmērīgi izplata saturu horizontāli.

autoaizpildīs katru kolonnu, līdz tā sasniegs, heightun darīs to, līdz beigsies tās saturs. Ņemot vērā saturu, šī vērtība ne vienmēr aizpildīs visas kolonnas un neaizpildīs tās vienmērīgi.

Tas ir tāds pats kā sulas liešana glāzēs. Katrā glāzē varat ielej vienādu daudzumu sulas un secināt, ka katru glāzi nepiepildāt līdz augšai ( balance). Alternatīvi, jūs varat uzpildīt glāzi uz augšu, līdz tā ir pilna, un atkārtojiet to, līdz vairs nav sulas. Tā rezultātā atlikušajās glāzēs var būt mazāk sulas vai tās nav ( auto).

Skatiet CSS-Tricks (@ css-tricks) kolonnu aizpildīšanas piemēru Pildspalva CodePen.

Pārlūka atbalsts

Par column-fillatslēgvārdu vērtības speciāli strādā Firefox. Viņi nedarbojās 2014. gada augustā, kad šis Almanac ieraksts tika sākotnēji rakstīts, bet nedarbojas, testējot vēlreiz 2015. gada augustā (Chrome 44). Šīs pārbaudes laikā šķiet, ka vērtības dinamiska maiņa nebūtu nepieciešama, jums bija jāpiespiež relayout.

Pārlūkprogrammas atbalsts vairāku kolonnu izkārtojumam kopumā: