Halloweenská akce! Na stránce s dobitím bodů zadej dole kód STRASIDELNYCH20 a získej porci +20% bodů zdarma!
Akce končí 31.10. o půlnoci.

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

HTML a CSS Manuál Text a písmo Multiple Columns (sloupce) - Český CSS3 manuál

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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

 

 

Manuál pro vás napsal David Jančík
Avatar
Autor je vášnivý programátor a vizionář. 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
Aktivity (1)

 

 

Komentáře

Avatar
Martin Plesh
Člen
Avatar
Martin Plesh:29.12.2015 15:29

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.
Avatar
dez1nd
Člen
Avatar
Odpovídá na Martin Plesh
dez1nd:22.6.2017 7:05

sice po 2letech, ale kdyby sem někdo zavítal jako já, tak přidat divu class kterej budeš mít nastylovanej

 
Odpovědět 22.6.2017 7:05
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na dez1nd
Honza Bittner:22.6.2017 8:10

To právě že nemůžeš. Sloupečky jsou jeden element a na části je rozdělí až CSS.

Odpovědět  +1 22.6.2017 8:10
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
dez1nd
Člen
Avatar
Odpovídá na Honza Bittner
dez1nd:22.6.2017 13:20

Jo takhle, mi nedošlo, že je to jeden dlouhý text. Díky za info :) a odpověď na dotaz od Martina asi nemáš viď ?

 
Odpovědět 22.6.2017 13:20
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na dez1nd
Honza Bittner:22.6.2017 17:58

To bohužel nelze, alespoň ne tak jednoduše. Udělal jsem menší ukázku, jak to můžeš nasimulovat pomocí absolutních divů, pokud víš, kolik sloupců tam chceš.

https://jsfiddle.net/rhvqydtg/

Odpovědět 22.6.2017 17:58
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
dez1nd
Člen
Avatar
Odpovídá na Honza Bittner
dez1nd:23.6.2017 6:09

Super, je to zajímavé, takhle by mě to ani nenapadlo. Moc děkuju za simulaci ;)

 
Odpovědět 23.6.2017 6:09
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 6 zpráv z 6.