Запълване на колона - CSS-трикове

Съдържание

Когато добавите височина към елемент с няколко колони, можете да контролирате как съдържанието запълва колоните. Съдържанието може да бъде балансирано или попълнено последователно.

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

Това свойство е достъпно само във Firefox. Firefox автоматично ще балансира съдържанието в многоколонно оформление с ограничена височина. Останалите браузъри винаги ще попълват колони последователно, когато им бъде дадено ограничение на височината.

За да накарате Firefox да се държи като другите браузъри, т.е. да попълва последователно колони, можете да зададете column-fill: auto.

Стойности

column-fillприема стойностите на ключовите думи balanceи auto.

balanceще запълни всяка колона с приблизително същото количество съдържание, но няма да позволи на колоните да растат по-високи от height. Може да откриете, че колоните ще излязат по-къси от, heightтъй като браузърът разпределя съдържанието равномерно хоризонтално.

autoще попълва всяка колона, докато стигне до heightи прави това, докато изтече съдържанието. Като се има предвид съдържанието, тази стойност няма задължително да попълни всички колони, нито да ги попълни равномерно.

Това е нещо като да наливаш сок в чаши. Можете да налеете равно количество сок във всяка чаша и да установите, че не пълните всяка чаша до върха ( balance). Като алтернатива можете да напълните чаша до върха, докато се напълни и да повтаряте това, докато не остане сок. В резултат на това в останалите чаши може да има по-малко или никакъв сок ( auto).

Вижте примера за запълване на колона Pen (CSS-трикове) от CSS-трикове (@ css-трикове) на CodePen.

Поддръжка на браузър

Стойностите на column-fillключовите думи работят специално във Firefox. Те не са работили през август 2014 г., когато първоначално е написан този запис в „Алманах“, но работи при повторно тестване през август 2015 г. (Chrome 44). По време на това тестване изглежда, че динамичната промяна на стойността няма да отнеме, трябваше да принудите релеут.

Поддръжка на браузъра за оформление с няколко колони като цяло: