Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Multiple Columns (sloupce) - Český CSS3 manuál

Určitě znáte členění textu do sloupců například z novin nebo z Wordu. Pomocí CSS3 a vlastnosti column toho lze hravě dosáhnout v HTML.

Vytvoření sloupců

Stačí nám nastavit column-count na požadovaný počet sloupců:

div
{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

Pak do divu stačí napsat nějaký text a on se automaticky rozčlení.

Text a písmo - CSS vlastnosti

Rozestup mezi sloupci

Za pomocí column-gap lze nastavit rozestup mezi sloupci:

div
{
    -moz-column-gap:40px; /* Firefox */
    -webkit-column-gap:40px; /* Safari and Chrome */
    column-gap:40px;
}

Pomocí column-rule můžeme určit jak bude vypadat místo mezi sloupci:

div
{
    -moz-column-rule:3px outset #ff00ff; /* Firefox */
    -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
    column-rule:3px outset #ff00ff;
}
Text a písmo - CSS vlastnosti

 

Všechny články v sekci
Text a písmo - CSS vlastnosti
Článek pro vás napsal David Jančík
Avatar
Autor je vášnivý programátor. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.
Aktivity