Попуњавање колоне - ЦСС-трикови

Преглед садржаја

Када додате висину елементу са више колона, можете да контролишете како садржај испуњава колоне. Садржај може бити уравнотежен или узастопно попуњен.

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

Ово својство је доступно само у Фирефоку. Фирефок ће аутоматски уравнотежити садржај у висинско ограниченом распореду са више колона. Остали прегледачи ће увек попуњавати колоне редом када им се додели ограничење висине.

Можете да подесите да се Фирефок понаша попут осталих прегледача, односно да се секвенце попуњавају секвенцијално column-fill: auto.

Вредности

column-fillприхвата вредности кључних речи balanceи auto.

balanceће попунити сваку колону приближно истом количином садржаја, али неће дозволити да колоне расту више од height. Можда ћете открити да ће се колоне појавити краће од оних heightдок прегледач дистрибуира садржај равномерно водоравно.

autoпопуњаваће сваку колону док не стигне до heightи ради то док не остане без садржаја. С обзиром на садржај, ова вредност неће нужно попунити све колоне нити их испунити равномерно.

То је попут сипања сока у чаше. У сваку чашу можете сипати једнаку количину сока и утврдити да сваку чашу не напуните до врха ( balance). Можете и чашу напунити до врха док се не напуни и понављати док не остане сок. Као резултат, у преосталим чашама може бити мање или нимало сока ( auto).

Погледајте пример Пен за попуњавање оловке (ЦСС-трикови) компаније ЦСС-Трицкс (@ цсс-трикови) на ЦодеПен-у.

Подршка прегледача

Вредности column-fillкључних речи посебно раде у Фирефоку. Нису радили у августу 2014. године када је овај чланак о Алманаху првобитно написан, али раде када су поново тестирани у августу 2015. (Цхроме 44). Током тог тестирања, чини се да динамичка промена вредности не би трајала, морали сте да форсирате релеј.

Подршка прегледача за распоред са више колона уопште: