Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

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

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

Unicorn College ONEbit hosting 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 [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
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. června 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. června 7:05
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na dez1nd
Honza Bittner:22. června 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. června 8:10
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
dez1nd
Člen
Avatar
Odpovídá na Honza Bittner
dez1nd:22. června 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. června 13:20
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na dez1nd
Honza Bittner:22. června 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. června 17:58
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
dez1nd
Člen
Avatar
Odpovídá na Honza Bittner
dez1nd:23. června 6:09

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

 
Odpovědět 23. června 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.