Vyplnění sloupce - Triky CSS

Obsah

Když do prvku s více sloupci přidáte výšku, můžete určit, jak obsah vyplní sloupce. Obsah může být vyvážen nebo vyplňován postupně.

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

Tato vlastnost je k dispozici pouze ve Firefoxu. Firefox automaticky vyváží obsah ve výškově omezeném vícesloupcovém rozvržení. Ostatní prohlížeče vždy vyplní sloupce postupně, když dostanou omezení výšky.

Chcete-li, aby se Firefox choval jako ostatní prohlížeče, to znamená postupné vyplňování sloupců, můžete nastavit column-fill: auto.

Hodnoty

column-fillpřijímá hodnoty klíčových slov balancea auto.

balancevyplní každý sloupec přibližně stejným množstvím obsahu, ale nedovolí, aby sloupce rostly výše než height. Možná zjistíte, že sloupce budou kratší, než heightprohlížeč distribuuje obsah rovnoměrně vodorovně.

autovyplní každý sloupec, dokud nedosáhne, heighta to až do vyčerpání obsahu. Vzhledem k obsahu nemusí tato hodnota nutně vyplňovat všechny sloupce ani je nevyplňovat rovnoměrně.

Je to něco jako nalít džus do sklenic. Do každé sklenice můžete nalít stejné množství šťávy a zjistíte, že neplníte každou sklenici až nahoru ( balance). Případně můžete naplnit sklenici až do jejího naplnění a opakovat to, dokud nezůstane šťáva. Výsledkem je, že zbývající sklenice mohou mít méně nebo žádnou šťávu ( auto).

Podívejte se na příklad vyplnění sloupce Pen (CSS-Tricks) od CSS-Tricks (@ css-tricks) na CodePen.

Podpora prohlížeče

Hodnoty column-fillklíčových slov konkrétně fungují ve Firefoxu. Nepracovali v srpnu 2014, kdy byl původně napsán tento almanach, ale při opětovném testování v srpnu 2015 (Chrome 44). Během tohoto testování se zdá, že dynamická změna hodnoty nebude trvat, museli jste vynutit předání.

Podpora prohlížeče pro vícesloupcové rozložení obecně: