Vlastnosti CSS3 pro vícesloupcový layout
Většina webových designérů a koderů si jistě pamatuje na dobu ne tak moc vzdálenou, kdy se pro tvorbu vícesloupcových layoutů stránek používaly tabulky (prvek <table>), ve kterých byly vnořeny tabulky, ve kterých byly vnořeny další tabulky a tak dál. Fungovalo to perfektně. Pak přišly kaskádové styly, které tvorbu vícesloupcových layoutů značně usnadnili – v HTML kódu stačilo vytvořit pár prvků <div>, které se následně prostřednictvím CSS vlastností jako width
, height
, float
, position
atd. naformátovaly a napozicovaly podle záměru webdesignéra. Vývoj ale samozřejmě pokračoval, tvůrci HTML a CSS specifikace si konečně uvědomili, že specifikace tu má být především pro webdesignéry a ne naopak, takže v HTML5 a CSS3 přibyla spousta nových praktických značek a vlastností. Například pro vytváření sloupců pomocí CSS3 byly představeno několik speciálních vlastností jako column-count
, column-width
, column-fill
atd. Článek CSS Columns z blogu Davida Walshe se věnuje právě těmto novým vlastnostem pro vytváření vícesloupcového layoutu. Popisuje význam jednotlivých vlastností a v příkladech demonstruje, jak je použít v praxi.
Zdroj: davidwalsh.name.
Mohlo by vás také zajímat
-
-
Členská sekce: 4 důvody proč ji mít na svém webu
12. března 2024 -
Aktualizujete svoji .NET webovou aplikaci? Může se hodit app_offline.htm
10. července 2024 -
Nejnovější
-
Nenechte se zaskočit TLS certifikáty na 47 dní
2. května 2025 -
Zrychlete svůj web s LiteSpeed a CZECHIA.COM
29. dubna 2025 -
-
Anonym
Čvc 3, 2012 v 17:06CSS column vlastnosti rozhodně nejsou učeny pro tvorbu layoutu stránky, ale jen k formátování textu. Nelze totiž určit, co se vykreslí ve kterém sloupci (co se nevejde do prvního se dá do druhého.
kubajz
Čvc 7, 2012 v 16:38Tak tak, vlastnosti column-* jsou určeny pro „novinové“ sloupce.