Rozložení více sloupců (podobně jako časopis) S CSS3
Obecně platí, že lidé při čtení extrémně dlouhého obsahu ztratí stopu. Proto je v tištěných médiích, jako jsou časopisy a noviny, obsah rozdělen do několika sloupců pro snadné čtení.
Vytvoření sloupce na webu je úplně jiný příběh. Je to docela těžké. Ve skutečnosti, ne příliš dlouho, možná budete muset rozdělit obsah ručně do některých divs a float to doprava nebo doleva, pak určit šířku, polstrování, okraj, ohraničení a tak dále.
Ale věci jsou nyní mnohem jednodušší CSS3 Multi Column Module. Jak z názvu jasně vyplývá, tento modul nám umožňuje rozdělit obsah do sloupového uspořádání, které vidíme v novinách nebo časopisech.
Podpora prohlížeče
Více prohlížečů je v současné době podporováno ve všech prohlížečích - Firefox 2+, Chrome 4+, Safari 3.1+ a Opera 11.1 - s výjimkou, jak bylo předvídáno, Internet Explorer, ale další verze IE10 začala poskytovat podporu pro tento modul.
Pro zbytek prohlížečů, aby fungoval, Firefox stále potřebuje -moz- předponu, zatímco Chrome a Safari potřebují -webkit- předpona. Opera nevyžaduje žádné předpony, takže můžeme použít pouze oficiální vlastnosti.
Zdroj: Kdy mohu použít rozložení více sloupců CSS3?
Vytvořit více sloupců
Než vytvoříme sloupce, připravili jsme pro ukázku několik textových odstavců zabalených do HTML5 značka, jak následuje;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum v srpnu. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendis non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in Integer vitae následný srpen. //a tak dále
… A určete šířku 600px ze seznamu stylů, to je vše.
Začněme vytvářet sloupce.
V níže uvedeném příkladu rozdělíme obsah do dva sloupce s počet sloupců vlastnictví. Tato vlastnost řekne prohlížeči, aby vykreslil obsah do sloupců podle zadaného čísla a nechal prohlížeč rozhodnout o správné šířce každého sloupce.
článek -webkit-column-count: 2; -moz-sloupec-počet: 2; počet sloupců: 2;
Kromě toho, že jsou definovány počtem, sloupce lze vytvořit zadáním šířky pomocí šířka sloupce opustit prohlížeč a rozhodnout, kolik sloupců by mělo být vygenerováno na místě.
V tomto příkladu určíme šířku sloupce pro 150px, výsledkem byl obsah rozdělen do tří sloupců.
článek -moz-column-width: 150px; -webkit-column-width: 150px; šířka sloupce: 150px;
Jak je uvedeno v spec. skutečná šířka sloupce může být širší nebo užší než zadaná šířka sloupce v závislosti na dostupném prostoru. Pokud hodnota šířky není explicitně zadána, pak také “auto” bude považován za výchozí, což může také znamenat “žádný sloupec”.
Mezera sloupce
Mezera sloupce definovat mezery oddělující každý sloupec. Hodnota mezery může být uvedena v em nebo px, ale jak je uvedeno v spec hodnota nemůže být záporná. V níže uvedeném příkladu určíme mezeru pro 30px, takže mezery mezi sloupy vypadají trochu širší.
článek -webkit-column-gap: 30px; -moz-sloupcová mezera: 30px; mezera ve sloupci: 30px;
Pravidlo sloupců
Pokud chcete přidat sloupce mezi sloupce, můžete použít sloupcové pravidlo vlastnost, která funguje velmi podobně okraj vlastnictví. Řekněme, že pokud chceme mezi sloupec umístit tečkovaný okraj, můžeme napsat;
article -moz-column-rule: 1px tečkovaný #ccc; -webkit-column-rule: 1px tečkovaný #ccc; sloupec-pravidlo: 1px tečkovaný #ccc;
Rozpětí sloupce
Tato vlastnost funguje docela podobně jako colspan v stůl štítek. Společnou implementací této vlastnosti je překlenout titulek obsahu ve všech sloupcích. Zde je příklad.
článek h1 -webkit-column-span: all; sloupec-rozpětí: všechny;
Ve výše uvedeném příkladu jsme definovali h1 k překlenutí napříč všemi sloupci a pokud je zadán rozsah sloupců, 1 jako výchozí. Tato vlastnost bohužel v době psaní tohoto článku funguje pouze v Operě a Chrome.
Závěrečná slova
To je vše prozatím, prošli jsme všemi důležitými věcmi pro vytvoření více sloupců s CSS3, a jak jsme zmínili na začátku, tento modul funguje velmi dobře v moderních prohlížečích, ale v aplikaci Internet Explorer to ještě nefunguje..
Doufáme, že nyní máte poměrně dobré znalosti o tom, jak vytvářet sloupce s CSS3, a pokud máte čas na experimenty, neváhejte se podělit o své metody a výsledky v poli níže. Děkujeme za přečtení tohoto příspěvku a bavte se.
- Demo
- Stáhněte si zdroj
