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

HTML a CSS Manuál Text a písmo 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;
}

 

  Aktivity (1)

Manuál pro vás napsal David Jančík [sczdavos]
Avatar
Autor je vášnivý programátor v .NET C# a PHP. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.

Miniatura
Všechny články v sekci
Text a písmo - CSS vlastnosti

 

 

Komentáře

Avatar
Martin Plesh
Člen
Avatar
Martin Plesh:

Jde nějak každému sloupci nastavit jiné barevné pozadí (jednoduše v CSS) ?

Odpovědět 29.12.2015 15:29
Když nejde o život, tak o ho*no jde.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.