Coloane-umplere - CSS-Tricks

Cuprins

Când adăugați înălțime unui element cu mai multe coloane, puteți controla modul în care conținutul umple coloanele. Conținutul poate fi echilibrat sau completat secvențial.

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

Această proprietate este disponibilă numai în Firefox. Firefox va echilibra automat conținutul într-un aspect cu coloane cu restricții de înălțime. Celelalte browsere vor umple întotdeauna coloanele secvențial atunci când li se oferă o constrângere de înălțime.

Pentru a face Firefox să se comporte ca și celelalte browsere, adică pentru a umple coloanele secvențial, puteți seta column-fill: auto.

Valori

column-fillacceptă valorile cuvintelor cheie balanceși auto.

balanceva umple fiecare coloană cu aproximativ aceeași cantitate de conținut, dar nu va permite coloanelor să crească mai înalte decât height. S-ar putea să descoperiți că coloanele vor fi mai scurte decât cele pe heightmăsură ce browserul distribuie conținutul în mod orizontal.

autova umple fiecare coloană până ajunge la heightși face acest lucru până când rămâne fără conținut. Având în vedere conținutul, această valoare nu va umple neapărat toate coloanele și nici nu le va umple uniform.

E ca și cum ai turna suc în pahare. Puteți turna o cantitate egală de suc în fiecare pahar și să constatați că nu umpleți fiecare pahar până sus ( balance). Alternativ, puteți umple un pahar până sus până se umple și repetați acest lucru până nu rămâne suc. Ca urmare, paharele rămase pot avea mai puțin sau deloc suc ( auto).

Consultați exemplul de completare a coloanei Pen (CSS-Tricks) de către CSS-Tricks (@ css-tricks) pe CodePen.

Suport pentru browser

Valorile column-fillcuvintelor cheie funcționează în mod specific în Firefox. Nu au funcționat în august 2014, când a fost scrisă inițial această intrare în Almanah, dar au fost testate din nou în august 2015 (Chrome 44). În timpul testării respective, se pare că schimbarea dinamică a valorii nu ar dura, ar fi trebuit să forțați un releu.

Suport pentru browser pentru aspectul cu mai multe coloane în general: