Stulpelio užpildymas - CSS-gudrybės

Pridėję aukštį prie kelių stulpelių elemento, galite valdyti, kaip turinys užpildo stulpelius. Turinys gali būti subalansuotas arba pildomas nuosekliai.

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

Ši nuosavybė pasiekiama tik naudojant „Firefox“. „Firefox“ automatiškai subalansuos turinį pagal aukščio ribotą kelių stulpelių išdėstymą. Kitos naršyklės visada užpildys stulpelius nuosekliai, kai bus nustatytas aukščio apribojimas.

Norėdami, kad „Firefox“ elgtųsi kaip ir kitos naršyklės, ty nuosekliai užpildyti stulpelius, galite nustatyti column-fill: auto.

Vertybės

column-fillpriima raktinių žodžių reikšmes balanceir auto.

balanceužpildys kiekvieną stulpelį maždaug tiek pat turinio, bet neleis stulpeliams užaugti aukštesniems už height. Galite pastebėti, kad stulpeliai bus pateikti trumpiau nei, heightnes naršyklė turinį paskirsto tolygiai horizontaliai.

autoužpildys kiekvieną stulpelį, kol pasieks, heightir atlikite tai, kol baigsis turinys. Atsižvelgiant į turinį, ši vertė nebūtinai užpildys visus stulpelius ir net užpildys juos tolygiai.

Tai tarsi užpilti sultis į stiklines. Galite įpilti vienodą kiekį sulčių į kiekvieną stiklinę ir pastebėti, kad neužpildote kiekvienos stiklinės iki viršaus ( balance). Arba galite užpildyti stiklinę iki viršaus, kol ji bus pilna, ir pakartoti tai, kol neliks sulčių. Todėl likusiose taurėse sulčių gali būti mažiau arba jų nėra ( auto).

„CodePen“ žr. „CSS-Tricks“ (@ css-tricks) „Pen“ stulpelių pildymo pavyzdį (CSS-Tricks).

Naršyklės palaikymas

Į column-fillraktažodžius vertės specialiai dirbti Firefox. Jie neveikė 2014 m. Rugpjūčio mėn., Kai iš pradžių buvo parašytas šis „Almanacho“ įrašas, bet veikia, kai dar kartą išbandomi 2015 m. Rugpjūtį („Chrome 44“). Atliekant šį bandymą atrodo, kad dinamiškai pakeisti vertę nereikėtų, turėjote priversti perduoti informaciją.

Naršyklės palaikymas kelių stulpelių išdėstymui apskritai: