Vyplnenie stĺpca - Triky CSS

Obsah

Keď do prvku s viacerými stĺpcami pridáte výšku, môžete ovládať, ako obsah vypĺňa stĺpce. Obsah je možné vyvážiť alebo naplniť postupne.

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

Táto vlastnosť je k dispozícii iba v prehliadači Firefox. Firefox automaticky vyváži obsah vo výškovo obmedzenom viacstĺpcovom rozložení. Ostatné prehliadače vždy vyplnia stĺpce postupne, keď dostanú obmedzenia výšky.

Ak chcete, aby sa Firefox správal ako ostatné prehľadávače, to znamená postupné vypĺňanie stĺpcov, môžete nastaviť column-fill: auto.

Hodnoty

column-fillakceptuje hodnoty kľúčového slova balancea auto.

balancevyplní každý stĺpec približne rovnakým obsahom, ale nedovolí, aby stĺpy rástli vyššie ako height. Možno zistíte, že stĺpce budú kratšie ako stĺpce, heightkeď prehliadač distribuuje obsah rovnomerne vodorovne.

autovyplní každý stĺpec, kým sa nedostane k, heighta to až do vyčerpania obsahu. Vzhľadom na obsah táto hodnota nemusí nevyhnutne vyplniť všetky stĺpce ani ich vyplniť rovnomerne.

Je to niečo ako nalievanie džúsu do pohárov. Do každého pohára môžete naliať rovnaké množstvo šťavy a zistíte, že každý pohár nenaplníte až po vrch ( balance). Prípadne môžete naplniť pohár až po vrch, kým nie je plný, a to opakovať, kým neostane šťava. Výsledkom je, že zvyšné poháre môžu mať menej alebo žiadnu šťavu ( auto).

Pozrite si príklad vyplnenia stĺpca Pen (CSS-Tricks) od CSS-Tricks (@ css-tricks) na CodePen.

Podpora prehľadávača

Hodnoty column-fillkľúčových slov konkrétne fungujú vo Firefoxe. Nepracovali v auguste 2014, keď bol tento príspevok v Almanachu pôvodne napísaný, ale nefungujú pri opätovnom testovaní v auguste 2015 (Chrome 44). Počas tohto testovania sa zdá, že dynamická zmena hodnoty by nezabrala, bolo treba vynútiť vyradenie.

Podpora prehľadávača pre viacstĺpcové rozloženie všeobecne: