Kolonnefyld - CSS-tricks

Indholdsfortegnelse

Når du føjer højde til et element med flere kolonner, kan du kontrollere, hvordan indholdet udfylder kolonnerne. Indholdet kan afbalanceres eller udfyldes sekventielt.

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

Denne egenskab er kun tilgængelig i Firefox. Firefox balancerer automatisk indhold i et højdebegrænset layout med flere kolonner. De andre browsere udfylder altid kolonner i rækkefølge, når de får en højdebegrænsning.

For at få Firefox til at opføre sig som de andre browsere, det vil sige at udfylde kolonner i rækkefølge, kan du indstille column-fill: auto.

Værdier

column-fillaccepterer nøgleordsværdierne balanceog auto.

balanceudfylder hver kolonne med omtrent den samme mængde indhold, men tillader ikke kolonnerne at vokse højere end height. Du kan finde ud af, at kolonnerne kommer op kortere end, heightda browseren fordeler indholdet jævnt vandret.

autoudfylder hver kolonne, indtil den når heightog gør dette, indtil den løber tør for indhold. I betragtning af indholdet udfylder denne værdi ikke nødvendigvis alle kolonnerne eller udfylder dem ens.

Det er som at hælde juice i briller. Du kan hælde en lige stor mængde juice i hvert glas og finde ud af, at du ikke fylder hvert glas til toppen ( balance). Alternativt kan du fylde et glas til toppen, indtil det er fyldt, og gentage dette, indtil der ikke er juice tilbage. Som et resultat kan de resterende briller have mindre eller ingen juice ( auto).

Se eksemplet med kolonnefyldning af pen (CSS-Tricks) af CSS-Tricks (@ css-tricks) på CodePen.

Browsersupport

De column-fillsøgeord værdier konkret arbejde i Firefox. De fungerede ikke i august 2014, da denne Almanac-post oprindeligt blev skrevet, men gør, når den blev testet igen i august 2015 (Chrome 44). Under denne test ser det ud til, at ændring af værdien dynamisk ikke ville tage, du var nødt til at tvinge et relayout.

Browsersupport til layout med flere kolonner generelt: