Krátké shrnutí stylů dělicích čar sloupců a pravidel. Vlastnosti více sloupců CSS3

Jeden z nejvíce nejužitečnější vlastnosti nová specifikace. Pamatujte si, jak moc se musíte snažit vytvořit plochu 3, 4 nebo 5 sloupců stejné šířky v gumovém provedení bez použití tabulek. Přesně tak, pekelné peklo. Nyní to můžete udělat pomocí několika řádků CSS. Pravda, je tu ještě malá muška, ale o tom později.

Jaké nástroje tedy máme k vytvoření vícesloupcového bloku?

Nezapomeňte, že pro prohlížeče Mozilla a webkit je nutné duplikovat vlastnosti s prefixy -webkit- A -moz-.

Myslím, že je jasné, jak s těmito vlastnostmi pracovat. Upozorňuji však na následující. Ve výchozím nastavení je počet sloupců automatický. To znamená, že pokud zadáte šířku sloupce, počet sloupců se vypočítá automaticky.

Nyní pár slov o tom, proč je to potřeba, kde to lze použít a jaká jsou omezení.

V zásadě nás sloupcový počet odkazuje zpět k novinám, přesněji k tisku. Proč se to dělalo? Především je to snadné čtení, protože... Lidské oko nejlépe vnímá řádky textu, které mají průměrně 10 slov. Rozdělení textu do sloupců také umožňuje lépe organizovat obsah a snížit počet volné místo na stránce.

Aplikace

K čemu lze tuto nemovitost využít? tomu věřím optimální využití Zvažovat lze následující: na stránkách s velkým středovým polem můžete text rozdělit do sloupců. Výhoda je, že když se neoddělí, tak se z toho nic hrozného nestane.

Jako druhé místo k použití bych navrhl nějaké masivní vertikální menu, kde jsou potřeba bloky stejné šířky. Pokud však počet sloupců nefunguje, dojde k záseku.

Omezení

Nelze nastavit vlastnosti jednotlivého sloupce, jako je pozadí a šířka, takže vlastnost zatím nelze použít pro rozložení webu

Pokud nastavíte výšku sloupce, pak pokud je textu hodně, přidají se další sloupce. aby se to vešlo. Ale naštěstí je to ošetřeno přes přetečení: skryté.

Pokud je blok rozdělen do sloupců a je zadáno pravidlo sloupce, pak když je text umístěn do jednoho sloupce, prohlížeče webkit zobrazí dělicí čáru, ale prohlížeče podobné Mozille ne.

Existují další dvě vlastnosti, které jsou ve specifikaci, ale nejsou podporovány žádným prohlížečem. Toto je zalomení sloupce, které lze použít k určení, kdy má začít další sloupec ( .container h3 ( column-break-before:always; )). Druhou vlastností je column-span, která umožňuje zobrazit prvek napříč všemi sloupci, například nadpis ( .container h1 ( column-span:all; )).

Tyto vlastnosti, které jsou k dispozici, donkey vůbec nepodporuje, nemluvě o některých dalších variantách a verzích prohlížeče (zdá se, že problémy s Operou). Sice je tu pokus napsat plugin pro osla, ale nazval bych to nejlepší scénář beta. Tím se však autor netají ().

To je pro dnešek vše. Je škoda, že vlastnost není podporována všemi a neexistují žádné hacky. I když největší škoda je, že funkcionalita ještě není plně dostupná a tuto metodu zatím nelze považovat za další z řady pro tvorbu vícesloupcových layoutů. Nezbývá než doufat, že si to konsorcium pečlivě rozmyslí.

CSS3 sloupce je koncept rozvržení s více sloupci, který umožňuje rozdělit obsah do sloupců. Sloupce mohou obsahovat nadpisy, text, tabulky, obrázky a jakékoli další vložené prvky.

Vytváření vícesloupcových značek pomocí modelu CSS3 columns

Podpora prohlížeče

TJ: 10.0
Firefox: 9,0 -moz-
Chrome: 4.0 -webkit-
Safari: 3.0 -webkit-
Opera: 11.1, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: 8
Prohlížeč Android: 2.1 -webkit-
Chrome pro Android: 44 -webkit-

1. Počet sloupců počet sloupců

Vlastnost umožňuje explicitně nastavit požadovaný počet sloupců a jejich šířka bude vypočítána na základě šířky dostupný prostor. Ve výchozím nastavení prohlížeč přidává mezi sloupce vodorovnou mezeru 1 m. Pokud je šířka obrázku větší než šířka sloupce, bude oříznut. Pokud je zadána šířka sloupce současně s hodnotou column-count , bude sloupec-count považován za maximální počet sloupců. Nemovitost se nedědí.

Syntax

Sekce ( -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; )
Rýže. 1. Příklad vícesloupcového uspořádání

2. Šířka sloupce šířka sloupce

Tato vlastnost umožňuje rozdělit obsah do sloupců bez nastavení vlastnosti column-count. Počet sloupců bude záviset na počtu sloupců daná šířka vejde se do kontejneru. Neděděno.

Syntax

Sekce ( -webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px; )

3. Šířka prázdného prostoru mezi sloupci sloupec-mezera

Vlastnost řídí mezery mezi sloupci. Pokud nastavíte dělicí čáru pro sloupce pomocí vlastnosti column-rule, bude tato čára umístěna uprostřed mezery a její šířka nezmění celkovou šířku. Nemovitost se nedědí.

Syntax

Sekce ( -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; )
Rýže. 2. Mezery mezi sloupci

4. Umístění prvku na několik sloupů s rozpětím sloupů

Vlastnost určuje počet sloupců, které budou protínat vybraný prvek. Není uvedeno pro kontejnerový blok, ale pro konkrétní prvek uvnitř, například pro titul.

Pokud chcete, aby se obrázek roztáhl přes všechny sloupce, nastavte img (display: block; -webkit-column-span: all; column-span: all;) . Nemovitost se nedědí.

Syntax

H1 ( -webkit-column-span: all; column-span: all; ) Rýže. 3. Umístění nadpisu na všechny sloupce

5. Styl dělicí čáry ve stylu sloupcového pravidla

Vlastnost vytváří prázdný prostor uvnitř mezi sloupci svislý pruh- dělicí čára. Pokud není zadaná barva čáry, některé efekty se nezobrazí. Neděděno.

Syntax

Sekce ( -webkit-column-rule-style: tečkovaný; -moz-column-rule-style: tečkovaný; column-rule-style: tečkovaný; )
Rýže. 4. Styl oddělovací čáry

6. Šířka dělící čáry sloupec-pravidlo-šířka

Vlastnost nastavuje šířku dělící čáry. Nefunguje bez vlastnosti column-rule-style. Neděděno.

Syntax

Sekce ( -webkit-column-rule-style: tečkovaný; -moz-column-rule-style: tečkovaný; column-rule-style: tečkovaný; -webkit-column-rule-width: 10px; -moz-column-rule- šířka: 10px; šířka-sloupce-rule: 10px)
Rýže. 5. Šířka dělicí čáry

7. Barva dělicí čáry sloupec-pravidlo-barva

Vlastnost umožňuje změnit barvu dělící čáry, která zdědí barvu textu. Neděděno.

Syntax

Sekce ( -webkit-column-rule-style: tečkovaný; -webkit-column-rule-width: 5px; -webkit-column-rule-color: #59ACE7; -moz-column-rule-style: tečkovaný; -moz- column-rule-width: 5px; -moz-column-rule-color: #59ACE7;
Rýže. 6. Barva dělící čáry

8. Rychlé shrnutí stylů dělicích čar sloupců a pravidel

Vlastnost umožňuje nastavit tři vlastnosti dělící čáry v jedné deklaraci - column-rule-width , column-rule-style a barva sloupec-pravidlo-barva. Neděděno.

Syntax

Sekce ( -webkit-column-rule: 5px tečkovaný #59ACE7; -moz-column-rule: 5px tečkovaný #59ACE7; column-rule: 5px tečkovaný #59ACE7; )

9. Nastavení sloupců pomocí vlastnosti single columns

Nemovitost je krátká poznámka vlastnosti column-width a column-count , současně nastavuje šířku a počet sloupců. Neděděno.

Syntax

Sekce ( -webkit-columns: 100px 3; -moz-columns: 100px 3; columns: 100px 3; )

Tato vlastnost je součástí zkrácené vlastnosti columns.

Zobrazit všechny vlastnosti s více sloupci: column-count , column-width , column-gap , column-rule , column-span , columns .

Syntax

Selektor ( počet sloupců: číslo | auto; )

Hodnoty

Výchozí hodnota: auto.

Příklady

Příklad

V v tomto příkladu text se rozpadne 3 sloupce(samozřejmě v prohlížečích, které podporují více sloupců, v jiných to bude jen prostý text v jednom sloupci):

#elem ( -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; text-align: justify; )

Výsledek spuštění kódu:

Příklad. Automatická hodnota

V tomto příkladu je šířka sloupce specifikována v 150 pixelů a jejich počet počet sloupců stojí ve významu auto- prohlížeč sám vybere požadovaný počet sloupců a mezeru mezi nimi:

#elem ( -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px zarovnat text: zarovnat ;

Výsledek spuštění kódu:

Být nadšencem se stalo jejím společenským postavením a někdy, když ani nechtěla, se stala nadšencem, aby neoklamala očekávání lidí, kteří ji znali. Zdrženlivý úsměv, který neustále hrál na tváři Anny Pavlovny, ač neodpovídal jejím zastaralým rysům, vyjadřoval jako rozmazlené děti neustálé vědomí jejího drahého nedostatku, z něhož nechce, nemůže a nepovažuje za nutné napravovat sebe.

V Uprostřed rozhovoru o politických akcích se Anna Pavlovna rozpálila. Budeme mluvit o použití vlastností CSS3 k vytvoření šablony s více sloupci. Protože se jedná o CSS3, použití jeho vlastností vyžaduje předem pečlivé testování.

Použití více sloupců

Chcete-li vytvořit více sloupců, můžete použít vlastnosti:

• počet sloupců
• šířka sloupce

První nastavuje přesný počet sloupců, které mají být na výstupu, a poslední nastavuje šířku každého sloupce. Všechny ostatní parametry sloupce budou určeny dostupnou šířkou.

Používáme HTML značky:

CSS kód bude vypadat takto:

Div (počet sloupců: 3)

nebo takhle:

Div (šířka sloupce: 15em) /* Můžete také použít px */

K dispozici je také krátký záznam:

Div (sloupce: 3 20 em)

V krátká poznámka Můžete nastavit počet sloupců a jejich šířku. V praxi se však zpravidla vyžaduje pouze jedna věc.

Definování sloupců pomocí vlastnosti column-count je vhodnější pro proměnlivé šablony, protože šířka sloupců se přizpůsobí změně šířky obrazovky prohlížeče.

Sloupové kontejnery

Použití vlastností column-count nebo column-width způsobí vytvoření nového kontejneru mezi vnější prvek a obsah. Říká se tomu sloupcový kontejner, i když nemůžete změnit jeho vlastnosti.

Sloupce jsou zarovnány do řady. Všechny sloupcové kontejnery v řadě budou mít stejnou výšku, i když se jejich obsah může výrazně lišit.

Pokud necháte prvek plavat ve sloupcovém kontejneru, bude omezen na sloupcový kontejner a ne na vnější kontejner. Fungovat bude i nastavení šířky sloupcového prvku v % – šířka se bude počítat ze šířky sloupcového kontejneru, nikoli vnějšího kontejneru.

Mezery a oddělovače sloupců

Nad reproduktory je malá kontrola. Mezery mezi sloupci můžeme nastavit pomocí vlastnosti column-gap. Ve výchozím nastavení je vlastnost column-gap nastavena na 1em.

Div (mezera mezi sloupci: 2 em)

Svislý oddělovač můžete také nastavit pomocí vlastnosti column-rule:

Div (pravidlo sloupce: tenké plné #ccc)

Krátký záznam může být reprezentován 3 vlastnostmi, které fungují stejně jako při definování rámců prvků:

• šířka-sloupce-pravidla
• sloupec-pravidlo-styl
• barva sloupce-pravidlo

Vzdálenost je stejná jako výška kontejneru kolony a separátor je umístěn ve středu rozteče. Mezera a oddělovač mají stejnou výšku. Pokud sloupec nemá žádný obsah, oddělovač mezi ním a sousedními sloupci se nezobrazí.

Výplň a rozpětí sloupců

Pravděpodobně nebudete moc často používat vlastnost column-fill k určení, jak mají být sloupce vyplněny. Toto je způsob, jak sdělit prohlížečům, kolik obsahu mají umístit do jednotlivých sloupců.

Můžete použít auto (výchozí) nebo vyvážení, které přinutí prohlížeč, aby se snažil vyplnit sloupce rovnoměrně. V praxi mezi výsledky použití těchto hodnot není velký rozdíl.

Sada rozpětí pomocí vlastnosti column-span je výrazně větší užitečné nastavení. To umožňuje HTML prvek natáhnout přes několik sloupů. Na obrázku výše používá záhlaví přesně tuto vlastnost.

H2 (rozpětí sloupců: vše)

Existují pouze dvě možné hodnoty - all (all) nebo none (nothing). Nebudete moci použít 2 ze 3 sloupců.

Přerušení reproduktoru

Existují tři podobné vlastnosti, které lze použít k přerušení obsahu ve sloupci kolem prvku.

• K prvku - přestávka před:
• V prvku - vloupání dovnitř: auto | vždy | vyhnout se | vlevo | vpravo | strana | sloupec | vyhýbat se stránce | vyhnout se sloupci
• Po prvku - přestávka po: auto | vyhnout se | vyhýbat se stránce | vyhnout se sloupci

Definice použitých hodnot:

• auto— Generování nebo zákaz zalomení stránek/sloupců je zakázáno.
• vždy
• vyhnout se— Zakázat zalomení stránek/sloupců.
• vlevo— Vygenerujte jeden nebo dva konce stránek tak, aby další stránka ve formátu stránky vlevo.
• právo- Vygenerujte jeden nebo dva konce stránek, aby další stránka byla formátována jako stránky napravo
• strana- Vždy generujte konec stránky.
• sloupec- Vždy generujte zalomení sloupce.
• vyhýbat se stránce— Zakázat konce stránek.
• vyhnout se sloupci— Zakázat zlomy sloupců.

Smyslem všech těchto vlastností a hodnot je zajistit, aby určitý obsah začínal v novém sloupci.

Pokud obrázek nebo souvislé slovo překročí šířku sloupce, bude uprostřed prostoru, kde je umístěn oddělovač, oříznuto.

Je možné omezit sloupce tak, aby prvek měl více sloupců, než je prostor pro výstup:

• Omezení výšky sloupce může mít za následek vznik dalších sloupců, spíše než poskytnutí dostatečného prostoru pro výstup.
• Omezení velikosti stránky může způsobit přesunutí dalších sloupců na další stránku.
• Zadání konce sloupce může způsobit přídavný sloupec bude výstup mimo dostupný výstupní prostor nebo na další stránce.

Závěr

Vlastnosti CSS3 pro vytváření šablony s více sloupci se mohou stát skvělý nástroj. Jejich použití ale vyžaduje pečlivou kontrolu podpory v různých prohlížečích.

S jejich pomocí se můžete změnit vzhled stávající projekt bez zásadních změn ve struktuře.