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í.

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;
}

Komentáře

Člen

Zobrazeno 6 zpráv z 6.