Veeru täitmine - CSS-trikid

Lang L: none (table-of-contents)

Mitmeveerulisele elemendile kõrguse lisamisel saate juhtida, kuidas sisu veerge täidab. Sisu võib olla tasakaalus või täita järjestikku.

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

See vara on saadaval ainult Firefoxis. Firefox tasakaalustab sisu piiratud kõrgusega mitmeveerulises paigutuses automaatselt. Teised brauserid täidavad veerud alati järjestikku, kui neile antakse kõrgusepiirang.

Selleks, et Firefox käituks nagu teised brauserid, st veerud järjestikku täita, saate määrata column-fill: auto.

Väärtused

column-fillaktsepteerib märksõna väärtusi balanceja auto.

balancetäidab iga veeru umbes sama hulga sisuga, kuid ei lase veergudel kasvada height. Võib juhtuda, et veerud tulevad lühemad kui need, heightkui brauser jaotab sisu ühtlaselt horisontaalselt.

autotäidab iga veeru, kuni see jõuab heightja teeb seda seni, kuni selle sisu saab otsa. Sisu arvestades ei pruugi see väärtus tingimata täita kõiki veerge ega täita neid ühtlaselt.

See on umbes nagu mahla valamine klaasidesse. Võite valada igasse klaasi võrdse koguse mahla ja leida, et te ei täida igat klaasi ülespoole ( balance). Teise võimalusena võite klaasi täita kuni selle täitumiseni ja korrata seda seni, kuni mahla ei jää. Seetõttu võib järelejäänud klaasides mahla olla vähem või üldse mitte ( auto).

Vaadake CodePeni lehel CSS-Tricks (@ css-tricks) veeru täitmise näidet Pen (CSS-Tricks).

Brauseri tugi

column-fillMärksõna väärtused konkreetselt töötavad Firefox. Need ei töötanud 2014. aasta augustis, kui see Almanaci kirje algselt kirjutati, kuid töötab uuesti, kui seda testiti uuesti 2015. aasta augustis (Chrome 44). Selle testimise ajal näib, et väärtuse dünaamiline muutmine ei läheks, peate sundima ülekande tegema.

Brauseri tugi mitme veeru paigutusele üldiselt: