Kolumnfyllning - CSS-tricks

Innehållsförteckning

När du lägger till höjd till ett element med flera kolumner kan du styra hur innehållet fyller kolumnerna. Innehållet kan balanseras eller fyllas i följd.

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

Den här egenskapen är endast tillgänglig i Firefox. Firefox balanserar automatiskt innehåll i en höjdbegränsad layout med flera kolumner. De andra webbläsarna fyller alltid kolumner i följd när de får en höjdbegränsning.

För att få Firefox att bete sig som de andra webbläsarna, det vill säga att fylla kolumner i följd, kan du ställa in column-fill: auto.

Värden

column-fillaccepterar sökordsvärdena balanceoch auto.

balancekommer att fylla varje kolumn med ungefär samma mängd innehåll, men tillåter inte kolumnerna att växa högre än height. Du kanske upptäcker att kolumnerna kommer upp kortare än heightwebbläsaren fördelar innehållet jämnt horisontellt.

autokommer att fylla varje kolumn tills den når heightoch gör detta tills det tar slut på innehållet. Med tanke på innehållet fyller detta värde inte nödvändigtvis alla kolumner eller fyller dem jämnt.

Det är ungefär som att hälla juice i glas. Du kan hälla lika mycket juice i varje glas och upptäcka att du inte fyller varje glas till toppen ( balance). Alternativt kan du fylla ett glas till toppen tills det är fullt och upprepa detta tills ingen juice är kvar. Som ett resultat kan de återstående glasen ha mindre eller ingen juice ( auto).

Se kolumnfyllningsexemplet Pen (CSS-Tricks) av CSS-Tricks (@ css-tricks) på CodePen.

Webbläsarstöd

De column-fillsökord värden specifikt arbetar i Firefox. De fungerade inte i augusti 2014 när denna Almanac-post ursprungligen skrevs, men fungerar när den testades igen i augusti 2015 (Chrome 44). Under den testningen verkar det som att ändra värdet dynamiskt inte skulle ta, du var tvungen att tvinga en relayout.

Webbläsarstöd för layout i flera kolumner i allmänhet: