Rozloženie viacerých stĺpcov (časopis podobný) s CSS3
Vo všeobecnosti ľudia strácajú stopy pri čítaní extrémne dlhého obsahu. Preto je v tlačových médiách, ako sú časopisy a noviny, obsah rozdelený na niekoľko stĺpcov pre ľahké čítanie.
Vytvorenie stĺpca na webe je úplne iný príbeh. Je to dosť ťažké. V skutočnosti, nie príliš dlho, možno budete musieť rozdeliť obsah ručne do niektorých divs a vznášajte sa doprava alebo doľava, potom zadajte šírku, polstrovanie, okraj, okraje atď.
Ale veci sa teraz zďaleka zjednodušujú Modul viacerých stĺpcov CSS3. Ako tento názov jasne naznačuje, tento modul nám umožňuje rozdeliť obsah do usporiadaného stĺpca, ktorý vidíme v novinách alebo časopisoch.
Podpora prehliadača
Viacnásobné stĺpce sú v súčasnosti podporované vo všetkých prehliadačoch - Firefox 2+, Chrome 4+, Safari 3.1+ a Opera 11.1 - s výnimkou, ako predpovedal, Internet Explorer, ale ďalšia verzia IE10 zrejme začala poskytovať podporu pre tento modul.
Pre ostatné prehliadače, aby to fungovalo, Firefox stále potrebuje -MOZ- prefix, zatiaľ čo Chrome a Safari potrebujú -WebKit- prefix. Opera nevyžaduje žiadne predpony, takže môžeme len používať oficiálne vlastnosti.
zdroj: Kedy môžem použiť rozloženie viacerých stĺpcov CSS3?
Vytvoriť viac stĺpcov
Pred vytvorením stĺpcov sme pripravili niekoľko textových odsekov pre demonštráciu zabalených do HTML5 tag, ako je uvedené ďalej;
Lorem ipsum dolor sedí amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque komodo ornare mi, sedieť amet aliquet justo bibendum non. Celočíselný bibendum convallis sapien, sit amet tincidunt orci placerat in Celý vitae následne augue. //a tak ďalej
... a špecifikujte šírku pre 600px zo štýlu štýlov, to je ono.
Teraz začneme vytvárať stĺpce.
V nižšie uvedenom príklade rozdelíme obsah na dva stĺpce s Kolóna-count vlastnosť. Táto vlastnosť umožní prehliadaču vykresliť obsah do stĺpcov podľa zadaného čísla a nechá prehliadač rozhodnúť o správnej šírke pre každý stĺpec.
článok -webkit-počet stĺpcov: 2; -moz-stĺpec-počet: 2; kolóna-počet: 2;
Okrem toho, že sú definované počtom, môžu byť stĺpce vytvorené špecifikovaním šírky pomocou stĺpec šírky a nechať prehliadač rozhodnúť, koľko stĺpcov by malo byť vytvorené na mieste.
V tomto príklade špecifikujeme šírku stĺpca pre 150px, čo viedlo k rozdeleniu obsahu do troch stĺpcov.
článok -moz-stĺpec-šírka: 150px; -webkit-šírka stĺpca: 150px; šírka stĺpca: 150 pixlov;
Ako je uvedené v špecifikácii. skutočná šírka stĺpca môže byť širšia alebo užšia ako špecifikovaná šírka stĺpca v závislosti od dostupného priestoru. Ak nie je explicitne zadaná hodnota šírky, tak aj “auto” sa bude považovať za predvolené, čo tiež môže znamenať “žiadny stĺpec”.
Stĺpcová medzera
Stĺpcová medzera definujte medzery, ktoré oddeľujú každý stĺpec. Hodnotu medzery je možné uviesť v em alebo px, ale ako je uvedené v špecifikácii hodnota nemôže byť záporná. V nižšie uvedenom príklade špecifikujeme medzeru pre 30PX, takže medzery medzi stĺpcami vyzerajú trochu širšie.
článok -webkit-gap-column: 30px; -moz-column-gap: 30px; medzera medzi stĺpcami: 30px;
Pravidlo stĺpca
Ak chcete pridať hranice medzi stĺpcom, môžete použiť stĺpec-pravidlo majetok, ktorý funguje veľmi podobne ako hraničné vlastnosť. Povedzme teda, že ak chceme medzi stĺpcom vložiť prerušovanú hranicu, môžeme napísať;
článok -moz-column-rule: 1px bodkovaný # ccc; -webkit-column-rule: 1px bodkovaný #ccc; pravidlo stĺpca: 1px bodkované #ccc;
Rozsah stĺpcov
Táto vlastnosť funguje veľmi podobne ako colspan v stôl tag. Spoločnou implementáciou tejto vlastnosti je rozšírenie nadpisu obsahu vo všetkých stĺpcoch. Tu je príklad.
článok h1 -webkit-span: all; kolóna rozpätie: všetky;
V príklade sme definovali h1 na rozloženie všetkých stĺpcov a ak je zadané rozpätie stĺpca, 1 sa bude považovať za predvolené. Bohužiaľ táto vlastnosť, v čase tohto písania, funguje len v operáciách a Chrome.
Konečné slová
To je všetko zatiaľ, prešli sme všetkými základnými záležitosťami a vytvorili sme niekoľko stĺpcov s CSS3 a ako sme už spomenuli na začiatku, tento modul funguje veľmi dobre v moderných prehliadačoch, ale zatiaľ nefunguje v programe Internet Explorer.
Nakoniec dúfame, že teraz máte dosť dobré vedomosti o tom, ako vytvoriť stĺpce s CSS3 a ak máte čas na experimenty, neváhajte a zdieľajte svoje metódy a výsledky do poľa s poznámkami nižšie. Ďakujeme, že ste si prečítali tento príspevok a bavili sa.
- demonštrácie
- Stiahnuť zdroj
