Kolonnefyll - CSS-triks

Innholdsfortegnelse

Når du legger til høyde i et element med flere kolonner, kan du kontrollere hvordan innholdet fyller kolonnene. Innholdet kan balanseres eller fylles sekvensielt.

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

Dette hotellet er bare tilgjengelig i Firefox. Firefox balanserer automatisk innhold i et høydebegrenset layout med flere kolonner. De andre nettleserne vil alltid fylle kolonner sekvensielt når de får en høydebegrensning.

For å få Firefox til å oppføre seg som de andre nettleserne, det vil si å fylle kolonner sekvensielt, kan du angi column-fill: auto.

Verdier

column-fillgodtar søkeordverdiene balanceog auto.

balancevil fylle hver kolonne med omtrent samme mengde innhold, men vil ikke tillate at kolonnene vokser høyere enn height. Du vil kanskje oppdage at kolonnene kommer opp kortere enn det heightsom nettleseren fordeler innholdet jevnt vannrett.

autovil fylle hver kolonne til den når heightog gjøre dette til den går tom for innhold. Gitt innholdet, vil ikke denne verdien nødvendigvis fylle alle kolonnene eller fylle dem jevnt.

Det er som å helle juice i glass. Du kan helle like mye juice i hvert glass og oppdage at du ikke fyller hvert glass til toppen ( balance). Alternativt kan du fylle et glass til det er fullt og gjenta dette til det ikke er juice igjen. Som et resultat kan de gjenværende glassene ha mindre eller ingen juice ( auto).

Se eksemplet på kolonnefylling av penn (CSS-Tricks) av CSS-Tricks (@ css-tricks) på CodePen.

Nettleserstøtte

De column-fillsøkeord verdier spesifikt arbeide i Firefox. De fungerte ikke i august 2014 da denne Almanac-oppføringen opprinnelig ble skrevet, men gjør det når den ble testet igjen i august 2015 (Chrome 44). Under testingen ser det ut til at det å endre verdien dynamisk ikke ville ta, du måtte tvinge et stafett.

Nettleserstøtte for flerkolonnelayout generelt: