Viacstĺpcový text. Vytvorenie viacstĺpcového rozloženia s modelom stĺpcov CSS3

V tomto návode vám ukážeme, ako použiť vlastnosti CSS3 na vytvorenie šablóny s viacerými stĺpcami. Keďže ide o CSS3, použitie jeho vlastností je potrebné vopred dôkladne skontrolovať.

Použitie viacerých stĺpcov

Na vytvorenie viacerých stĺpcov môžete použiť vlastnosti:

• počet stĺpcov
• šírka stĺpca

Prvý nastavuje presný počet stĺpcov, ktoré sa majú zobraziť, a druhý nastavuje šírku každého stĺpca. Všetky ostatné možnosti stĺpcov budú určené podľa dostupnej šírky.

Použime označenie HTML:

CSS kód bude vyzerať takto:

Div (počet stĺpcov: 3)

alebo takto:

Div (šírka stĺpca: 15em) /* Môžete použiť aj px */

K dispozícii je aj krátky záznam:

Div (stĺpce: 3 20 em)

V krátkom zadaní môžete nastaviť počet stĺpcov aj ich šírku. V praxi sa však spravidla vyžaduje iba jedna vec.

Definovanie stĺpcov pomocou vlastnosti column-count je vhodnejšie pre Fluid Templates, pretože šírky stĺpcov sa prispôsobujú zmenám šírky obrazovky prehliadača.

Kontajnery na reproduktory

Pomocou vlastností column-count alebo column-width vytvoríte nový kontajner medzi vonkajším prvkom a obsahom. Nazýva sa to stĺpcový kontajner, aj keď preň nemôžete meniť vlastnosti.

Stĺpce sú zarovnané v rade. Všetky stĺpcové kontajnery v rade budú mať rovnakú výšku, aj keď ich obsah sa môže výrazne líšiť.

Ak urobíte nejaký prvok plávajúcim v kontajneri stĺpca, bude obmedzený na kontajner stĺpca a nie na vonkajší kontajner. Fungovať bude aj nastavenie šírky stĺpcového prvku v % – šírka sa vypočíta zo šírky stĺpcového kontajnera, nie vonkajšieho kontajnera.

Medzery a oddeľovače stĺpcov

Nad stĺpcami je malá kontrola. Rozostupy medzi stĺpcami môžeme nastaviť pomocou vlastnosti column-gap. Štandardne je vlastnosť column-gap nastavená na 1em.

Div (medzera v stĺpcoch: 2 em)

Vertikálny oddeľovač môžete nastaviť aj pomocou vlastnosti column-rule:

Div (pravidlo stĺpca: tenká pevná látka #ccc)

Krátky záznam môže byť reprezentovaný 3 vlastnosťami, ktoré fungujú rovnakým spôsobom ako pri definovaní hraníc prvkov:

• šírka- stĺpca
• stĺpcový-pravidlo-štýl
• farba stĺpca-pravidla

Vzdialenosť je rovnaká ako výška kontajnera stĺpca a separátor je umiestnený v strede rozstupu. Medzera a oddeľovač majú rovnakú výšku. Ak stĺpec nemá žiadny obsah, oddeľovač medzi ním a susednými stĺpcami sa nezobrazí.

Plnenie stĺpcov a rozsah

Vlastnosť column-fill pravdepodobne nebudete často používať na zadanie výplne stĺpcov. Toto je spôsob, ako povedať prehliadačom, koľko obsahu majú umiestniť do jednotlivých stĺpcov.

Môžete použiť hodnoty auto (predvolené) alebo vyváženie (vyvážené), ktoré prinútia prehliadač, aby sa pokúsil vyplniť stĺpce rovnomerne. V praxi nie je medzi výsledkami použitia týchto hodnôt veľký rozdiel.

Rozpätie nastavené s vlastnosťou column-span je oveľa užitočnejšie nastavenie. Umožňuje, aby prvok HTML pokrýval viacero stĺpcov. Na obrázku vyššie názov používa presne túto vlastnosť.

H2 (rozsah stĺpcov: všetko)

Možné sú len dve hodnoty - všetky (všetky) alebo žiadne (nič). Nebudete môcť použiť 2 z 3 stĺpcov.

Prerušenie reproduktora

Existujú tri podobné vlastnosti, ktoré možno použiť na rozdelenie obsahu v stĺpci okolo prvku.

• Pred prvkom - prestávka pred:
• V prvku - zlomiť zvnútra: auto | vždy | vyhnúť sa | vľavo | vpravo | strana | stĺpec | vyhnúť sa stránke | vyhnúť-stĺpec
• Po prvku - prestávka po: auto | vyhnúť sa | vyhnúť sa stránke | vyhnúť-stĺpec

Definície použitých hodnôt:

• auto- Generovanie alebo zakázanie zlomov strán/stĺpcov je zakázané.
• vždy
• vyhnúť sa- Zakázať zlomy strán/stĺpcov.
• vľavo— Vytvorte jeden alebo dva zlomy strany, aby bola ďalšia strana naformátovaná ako strana vľavo.
• správny- Vytvorte jeden alebo dva zlomy strany, aby bola ďalšia strana naformátovaná ako strany vpravo.s
• stránku- Vždy vygenerujte zlom stránky.
• stĺpec- Vždy generujte zlom stĺpca.
• vyhnúť sa stránke- Zakázať zlom stránky.
• vyhnúť-stĺpec— Zakázať zlom stĺpca.

Zmyslom všetkých týchto vlastností a hodnôt je, aby určitý obsah začínal v novom stĺpci.

Ak obrázok alebo súvislé slovo presiahne šírku stĺpca, bude orezané v strede priestoru, kde je umiestnený oddeľovač.

Je možné obmedziť stĺpce tak, že prvok má viac stĺpcov, ako má priestor na zobrazenie:

• Obmedzenie výšky stĺpca môže viesť k nadbytočným stĺpcom namiesto dostatočného priestoru na výstup.
• Obmedzenie veľkosti strany môže spôsobiť presun ďalších stĺpcov na ďalšiu stranu.
• Zadanie zalomenia stĺpca môže spôsobiť, že sa stĺpec navyše zobrazí mimo dostupného výstupného priestoru alebo na ďalšej stránke.

Záver

Vlastnosti CSS3 na vytvorenie viacstĺpcového rozloženia môžu byť skvelým nástrojom. Ich aplikácia však vyžaduje starostlivé testovanie podpory v rôznych prehliadačoch.

S ich pomocou môžete zmeniť vzhľad existujúceho projektu bez globálneho prepracovania štruktúry.

V pokračovaní mojej témy vám ponúkam preklad článku s hlbším ponorom do viacstĺpcovej vlastnosti s jednoduchými a názornými príkladmi.

V praxi sa osvedčilo aj v novinách a časopisoch, že text rozdelený do niekoľkých stĺpcov sa vníma oveľa jednoduchšie. Na webových stránkach bol až donedávna problém so zobrazovaním obsahu týmto spôsobom, došlo k tomu, že návrhár rozloženia rozdelil text na niekoľko divov, ale s CSS3 Multi Column Module môže byť všetko oveľa jednoduchšie.

Vytváranie obsahu rozdeleného do viacerých stĺpcov

Text sme rozdelili do dvoch stĺpcov:

Článok ( -webkit-column-count:2; -moz-column-count:2; column-count:2; )

Používaním nehnuteľnosti šírka stĺpca stĺpce môžete nastaviť na požadovanú šírku:

Článok ( -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; )

Medzera medzi stĺpcami

Článok ( -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; )

Oddeľovač stĺpcov

Článok ( -moz-column-rule: 1px bodkovaný #ccc; -webkit-column-rule: 1px bodkovaný #ccc; column-rule: 1px bodkovaný #ccc; )

Zlúčenie stĺpcov

Článok h1 ( -webkit-column-span: all; column-span:all; )

Výsledok

ako urobiť stĺpce

Najprv sa pozrime na niekoľko spôsobov, ako môžete vytvoriť stĺpce, a potom prejdeme na niekoľko príkladov.

S plávajúcimi blokmi. Dnes je to najpopulárnejší spôsob výroby stĺpikov, aj keď flexbox ho pomaly začína vytláčať. V predvolenom nastavení nemôžu byť dva bloky v normálnom toku na rovnakom riadku, ale toto správanie sa dá jednoducho zmeniť nastavením oboch plávať: left | správny. Začnú tlačiť na ľavý alebo pravý okraj. Aby blok, ktorý nasleduje za nimi, vnímal plávajúce bloky a bol umiestnený správne, musí byť napísané jasne: oboje.

Pomocou plavákov sa najčastejšie vyrábajú 2 alebo 3 stĺpy. Usporiadanie stránky s plávajúcimi blokmi nie je príliš ťažké, stačí poznať niektoré nuansy ich správania. Napríklad, ak potrebujete vytvoriť oblasť na zobrazovanie článkov a vpravo - bočný stĺpec s ponukou, potom plávajúce bloky veľmi ľahko implementujú takéto usporiadanie.

Pomocou tabuliek. Tabuľky boli vo všeobecnosti navrhnuté tak, aby zobrazovali veľké množstvo buniek a stĺpcov, takže vytváranie stĺpcov v nich je hračka. Tabuľka môže mať aspoň 20 stĺpcov. Celá jeho štruktúra je špecifikovaná v html kóde, takže kód je dosť ťažkopádny.

Keďže bunky v tabuľke je možné nastaviť na ľubovoľnú veľkosť, zvykli sa nimi vytvárať takmer všetky stránky. Napríklad na implementáciu najjednoduchšieho rozloženia (hlavička, obsah, bočný panel, päta) boli v tabuľke vytvorené tri riadky (riadok tabuľky tvorí značka tr). Každý riadok obsahuje dve bunky, pretože obsah a bočný panel musia byť od seba oddelené. A v hlavičke a päte boli tieto bunky v prípade potreby jednoducho spojené pomocou atribútu colspan na značke td.

Môžete jednoducho odstrániť okraj z buniek, čo umožnilo webovým vývojárom pomerne jednoducho vysádzať zložité šablóny.

S Flexboxom. Ide o modernú technológiu, ktorá sa začala šíriť v roku 2014, hoci existovala už predtým. Jeho podstata je nasledovná: vytvorí sa jeden spoločný kontajnerový blok, v ktorom sú umiestnené ďalšie bloky, ktoré bude potrebné vyrobiť vo forme stĺpcov, potom je potrebné tento kontajner nastaviť na zobrazovanie: flex.

Ďalej sa zvyčajne nastavuje vlastnosť flex-direction, ktorá určuje smer hlavnej osi, pozdĺž ktorej budú bloky umiestnené. Ako hodnoty môžete nastaviť: riadok a stĺpec. Prvá hodnota nasmeruje bloky vodorovne sprava doľava, druhá nadol. Môžete tiež nastaviť spätný chod: flex-direction: riadok-reverz. Bloky budú umiestnené sprava doľava.

Existuje aj sada samostatných vlastností pre podradené bloky flex kontajnera. V podstate tieto vlastnosti umožňujú nastaviť veľkosť bloku a jeho správanie vzhľadom na ostatné prvky.

Flexbox má tú výhodu, že je oveľa flexibilnejším prvkom. Ak pri blokovom rozložení weboví vývojári často museli počítať všetko podľa pixelov, nastavovať správne zarážky, pridávať rôzne triky do kódu, aby sa všetko nerozpadlo, potom sa flexibilné prvky ľahko zoradia do stĺpca, do riadku a vo všeobecnosti vyžadujú veľa menej matematických výpočtov od vedľajšieho vývojára.

Rozdelenie textu do stĺpcov

Stále som sa však nedotkol najdôležitejšej témy. CSS dnes ponúka možnosť rozdeliť text do bloku tela bez pomoci plávajúcich políčok, tabuliek alebo flexboxov. To znamená, že v html zostáva jeden bežný blok a text je rozdelený do stĺpcov iba vďaka css.

Vlastnosti uvedené nižšie sa teda vzťahujú na blok, v ktorom je potrebné text rozdeliť do niekoľkých stĺpcov.

Column-count – vlastnosť nastavuje počet stĺpcov, do ktorých má byť text rozdelený. Odporúča sa nastaviť hodnotu od 2 do 4, podľa toho, ako sa vám to páči.

Column-width – nastavuje počet znakov textu v jednom stĺpci. Zdôrazňujem, že šírka stĺpca sa v tomto prípade nenastavuje podľa pixelov, ale podľa počtu znakov. Optimálne: 30 – 50 znakov v jednom stĺpci. Túto vlastnosť tiež nemožno žiadnym spôsobom nazvať cross-browser, pretože nastavujete iba požadovaný počet znakov, ale či bude prehliadač konať v súlade s vašimi želaniami, stále nie je známe.

Column-gap - definuje medzeru medzi stĺpcami. Dá sa nastaviť v pixeloch.

Column-rule – Nakreslí čiaru oddeľujúcu stĺpce. Syntax vlastnosti je presne rovnaká ako vlastnosť border. Najprv sa napíše hrúbka čiary, potom jej typ a potom farba.

Tiež by som chcel spomenúť, že všetky tieto vlastnosti css sú relatívne nové. Napríklad Internet Explorer ich podporuje až od desiatej verzie. Sú to vlastnosti zo štandardu CSS3, takže ak ich budete používať na svojej stránke, musíte sa postarať o kompatibilitu medzi prehliadačmi, inak v starších verziách Opery a IE nebudú žiadne stĺpce.

Príklady

plávajúce bloky. Rozloženie stránky do dvoch stĺpcov sa najčastejšie robí veľmi jednoducho pomocou plávajúcich blokov. V css je implementovaný takto:

Float-block1( float: left ) .float-block2( float: left ) blok, ktorý by mal byť pod floats( clear: left | both )

To znamená, že spodný blok musí špecifikovať túto vlastnosť, aby správne zapadol. Plávajúce bloky sa teda stanú jedným riadkom, ak majú dostatočnú šírku v nadradenom prvku. Prirodzene, musíte zadať aj šírku, výšku a rám blokov, aby to vyzeralo ako na tejto snímke obrazovky:

A teraz poďme na to najzaujímavejšie. Pridajme do hlavného bloku veľa náhodného textu a skúsme ho tam zobraziť v troch stĺpcoch, ako v novinách alebo časopise. Aby ste to dosiahli, musíte do kódu pre tento blok pridať nasledujúce pravidlá.