X stĺpcový zoznam s jediným OL/UL tagom
Pred časom som v práci riešil zapeklitý problém. Ako s jedným UL/OL LI zoznamom vytvoriť štvorsĺpcový, ktorý sa po zmenšení okna prehliadača automaticky prispôsobí na tri stĺpce? Prvé pokusy nedopadali najlepšie.
Prvé riešenie pozostáva z troch jednotlivých OL položiek. Skúste si zmenšiť okno na cca 900 px na šírku. Nepoužitelné.
Ďalšie riešenie už pozostáva iba z jediného OL zoznamu a je o čosi kompaktnejšie, no takisto nepoužítelné, pretože formátovanie položiek prebieha zľava-doprava.
Skúsil som použiť aj css3 vlasnosť column-count, pomocou ktorého je možne rozdeliť element, napriklad P, či OL/UL LI zoznam na nami zadaný počet zoznamov. Problém nastal užneviemkde.
Azda najefektívnejšie riešenie. Samého ma to nenapadlo, tip mi dal kolega. Trik spočíva v dvoch krokoch. Prvý je css zápis @media all and (max-width:900px) do ktorého zapisujeme vlastnosti pre rozlíšenie 900px a menšie. Tým pádom môžme box v rozlíšení 901px, a vačšom, štýlovať ako červený a pod rozlíšením menším, napríklad ako modrý. Následne využijeme selektor nth-child, ktorým formátujeme jednotlivé stĺpce. Tu je príklad.