Nehnuteľnosť vlámanie dovnútra definuje princípy pre usporiadanie zlomov strán a stĺpcov v rámci aktuálneho prvku. V predvolenom nastavení sa zlomy strán alebo stĺpcov umiestňujú automaticky a nededia sa z nadradených prvkov. Hodnota vyhýbacej sa strany sa používa iba pri formátovaní stránkovaných dokumentov, napríklad pri tlači, a pri nestránkovaných zobrazeniach, napríklad pri zobrazení v prehliadači, sa ignoruje. Hodnota vyhnúť sa stĺpcu sa používa pre text s viacerými stĺpcami.

Platné hodnoty

• CSS2 CSS3 auto- automatické zalomenie strany alebo stĺpca pred aktuálnym prvkom (predvolené)
• CSS2 CSS3 vyhnúť sa
• CSS3 vyhýbacia stránka- zrušiť zlom stránky v rámci aktuálneho prvku
• CSS3 vyhnúť-stĺpec- zrušenie zalomenia stĺpca vo vnútri aktuálneho prvku

Príklady použitia

vlámanie: auto; - Rovnomerné rozdelenie

Rovnomerná distribúcia obsahu medzi stĺpcami, v ktorej sú prestávky umiestnené automaticky na najvhodnejšie miesta v rámci alebo medzi ľubovoľnými prvkami. Pri rovnomernom rozložení je výška stĺpcov približne rovnaká s viac-menej rovnomernou hustotou textu.

Štýl ( column-count: 3; column-gap: 2em; column-rule: 1px solid #666; )

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

break-inside: avoid-stĺpec; - zrušiť zlomy stĺpcov

Style ( column-count: 3; column-gap: 2em; column-rule: 1px solid #666; ) .style div ( break-inside: avoid-column; )

1. blok text text text text text text text text text

2. blok text text text text text text text text text text text text text text text text text text

3. blok text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Vlastnosť break-inside je definovaná v špecifikácii modulu CSS 3 Multi-column Layout, vzťahuje sa na prvky na úrovni bloku a je platná na všetkých médiách stránky, jej hodnota sa nededí z nadradeného prvku v hierarchii dokumentu a predvolená je auto. Táto vlastnosť je v súčasnosti podporovaná vo všetkých hlavných prehliadačoch.

Pozri tiež:

• break-after - pravidlá pre nastavenie zalomenia stĺpca alebo strany za prvkom
• break-before - pravidlá pre nastavenie zalomenia stĺpca alebo stránky pred prvkom
• -webkit-column-break-after - pravidlá pre nastavenie zalomenia stĺpca za prvkom
• -webkit-column-break-before - pravidlá pre nastavenie zalomenia stĺpca pred prvkom
• -webkit-column-break-inside - pravidlá pre nastavenie zalomenia stĺpca vo vnútri prvku

modul CSS3 stĺpce popisuje viacstĺpcové rozloženie, ktoré vám umožňuje organizovať obsah tak, aby zahŕňal viacero vertikálnych kontajnerov, podobne ako noviny alebo časopis. Stĺpce môžu obsahovať nadpisy, text, tabuľky, obrázky a akékoľvek iné vložené prvky.

Viacstĺpcový model

Podpora prehliadača

IE: 10
Hrana: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
Prehliadač UC pre Android: 11.8
Chrome pre Android: 73
Internet Samsung: 5, 4 -webkit-

Starý príspevok

24. novembra 2012

15 najkrajších malých miest v Anglicku

1. Berwick-upon-Tweed

Berwick bol založený ako anglosaská osada za čias Kráľovstva Northumbria, ktoré bolo v 10. storočí anektované Anglickom. Táto oblasť bola viac ako 400 rokov ústredným bodom historických pohraničných vojen medzi Anglickým kráľovstvom a Škótskom a niekoľkokrát sa medzi týmito dvoma kráľovstvami zmenilo vlastníctvo Berwicku. Naposledy zmenil majiteľa, keď ho v roku 1482 prevzal Richard z Gloucesteru pre Anglicko. Dodnes mnohí Berwickovci cítia blízku príbuznosť so Škótskom.

V súčasnosti je Berwick-upon-Tweed hojne navštevovaný pre svoju veľmi viditeľnú históriu: stredoveké mestské hradby, alžbetínske hradby, zrúcaniny hradu z 13. storočia, jeho „Starý most“ zo 17. storočia, radnica, najstaršie britské vojenské kasárne, najsevernejší hotel Anglicka, medzi inými. .

2.Ražné

Staroveké Rye sú dláždené ulice a rozpadnuté rady domov pri mori. Pôvodne súčasť Cinque Ports Confederation, piatich strategických miest dôležitých pre obchod a vojenské účely v stredoveku, dnes je Rye prakticky živým múzeom. Žitný hrad, ľudovo známy ako Ypres Tower, postavil v roku 1249 Henrich III. na ochranu pred častými nájazdmi Francúzov; ešte starší, z doby Normanov sv. Mary's Church ponúka výhľad na mesto. Rye je tiež len pár minút od jednej z najznámejších anglických pláží, Camber Sands, dve míle dlhého ihriska pre kitesurferov a milovníkov pláží.

Obrázok 1. Príklad viacstĺpcového rozloženia

1. Počet a šírka stĺpcov

Určenie počtu a šírky stĺpcov je základom pri vytváraní viacstĺpcového rozloženia. Vlastnosti column-count a column-width sa používajú na nastavenie počtu a šírky stĺpcov.

Tretia vlastnosť, stĺpce, je skrátená vlastnosť, ktorá nastavuje šírku a počet stĺpcov naraz.

Skutočný počet a šírku stĺpcov môžu ovplyvniť ďalšie faktory, ako sú explicitné zlomy stĺpcov, obsah a obmedzenia výšky.

1.1. Šírka stĺpca: vlastnosť šírky stĺpca

Vlastnosť column-width určuje minimálnu šírku, ktorú by mal každý stĺpec zaberať.

Nehnuteľnosť sa nededí.

Syntax

Šírka stĺpca: auto; šírka stĺpca: 100px; šírka stĺpca: 10em; šírka stĺpca: 3,3vw; šírka stĺpca: zdediť; šírka stĺpca: počiatočná;

1.2. Počet stĺpcov: vlastnosť počtu stĺpcov

Vlastnosť column-count popisuje počet stĺpcov a ich šírka sa vypočíta na základe šírky dostupného priestoru. Ak je šírka stĺpca špecifikovaná súčasne so stĺpcom počet stĺpcov , počet stĺpcov sa bude považovať za maximálny počet stĺpcov.

Nehnuteľnosť sa nededí.

Syntax

Počet stĺpcov: auto; počet stĺpcov: 2; počet stĺpcov: zdediť; počet stĺpcov: počiatočné;

1.3. Nastavenie stĺpcov pomocou vlastnosti jedného stĺpca

Vlastnosť columns je skrátená vlastnosť na nastavenie šírky stĺpca a počtu stĺpcov. Vynechané hodnoty sa nastavia na pôvodné hodnoty.

Nehnuteľnosť sa nededí.

Syntax

Stĺpce: 12em; /* sirka stĺpca: 12em; column-count: auto */ columns: auto 12em; /* sirka stĺpca: 12em; počet stĺpcov: auto */ stĺpce: 2; /* sirka stĺpca: auto; počet stĺpcov: 2 */ stĺpce: 2 auto; /* sirka stĺpca: auto; počet stĺpcov: 2 */ stĺpce: auto; /* sirka stĺpca: auto; column-count: auto */ columns: auto auto; /* sirka stĺpca: auto; počet stĺpcov: auto */ stĺpce: zdediť; stĺpce: počiatočné;

2. Medzery medzi stĺpcami a deliacimi čiarami

Medzery medzi stĺpcami a deliace čiary sú umiestnené medzi stĺpcami v jednom viacstĺpcovom kontajneri. Dĺžka medzier a oddeľovačov sa rovná výške stĺpca. Medzery v stĺpcoch zaberajú priestor, to znamená, že posúvajú obsah v susedných stĺpcoch od seba.

Deliaca čiara je nakreslená v strede priestoru medzi stĺpcami a nezaberá žiadne miesto. To znamená, že prítomnosť alebo hrúbka deliacej čiary nezmení umiestnenie ničoho iného.

Čiary sú namaľované tesne nad hranicou viacstĺpcového prvku. Ak má prvok posúvateľnú oblasť, deliace čiary sa posúvajú spolu so stĺpcami. Deliace čiary sa zobrazujú iba medzi dvoma stĺpcami, ktoré majú obsah.

2.1. Medzery medzi stĺpcami: vlastnosť column-gap

Vlastnosť column-gap definuje medzeru medzi stĺpcami. Ak nastavíte deliacu čiaru pre stĺpce pomocou vlastnosti column-rule, potom bude táto čiara umiestnená v strede medzery a jej šírka nezmení celkovú šírku.

Nehnuteľnosť sa nededí.

Syntax

Medzera v stĺpcoch: normálna; medzera medzi stĺpcami: 3px; medzera medzi stĺpcami: 2,5 em; medzera medzi stĺpcami: 3 %; stĺpec-medzera: zdediť; stĺpcová medzera: počiatočná;

2.2. Farba deliacej čiary: vlastnosť column-rule-color

Vlastnosť column-rule-color určuje farbu deliacej čiary.

Nehnuteľnosť sa nededí.

Syntax

Farba stĺpca: ružová; farba-pravidla stĺpca: #D71C3B; color-rule-color: rgb(192, 56, 78); farba stĺpca: transparentná; farba-pravidlo stĺpca: hsla(0, 100 %, 50 %, 0,6); farba stĺpca-pravidla: zdediť; farba stĺpca-pravidla: počiatočná;

2.3. Štýl deliacej čiary: vlastnosť v štýle stĺpcových pravidiel

Vlastnosť column-rule-style nastavuje štýl deliacej čiary.

Nehnuteľnosť sa nededí.

Syntax

Štýl stĺpcového pravidla: žiadny; štýl stĺpcových pravidiel: skrytý; štýl stĺpcových pravidiel: bodkovaný; štýl stĺpcových pravidiel: prerušovaný; štýl stĺpcových pravidiel: pevný; štýl stĺpcových pravidiel: dvojitý; štýl stĺpcov: drážka; štýl stĺpcov: hrebeň; štýl stĺpcov: vložka; column-rule-style:outset; stĺpcový-pravidlo-štýl: zdediť; stĺpcový-štýl pravidla: začiatočné;

2.4. Šírka deliacej čiary: vlastnosť column-rule-width

Vlastnosť column-rule-width nastavuje šírku deliacej čiary. Záporné hodnoty nie sú povolené. Nefunguje bez vlastnosti column-rule-style.

Nehnuteľnosť sa nededí.

Syntax

Šírka stĺpca: tenké; column-rule-width: medium; šírka- stĺpca: hrubá; column-rule-width: 1px; šírka-pravidla stĺpca: 2,5 em; column-rule-width: dedit; column-rule-width: initial;

2.5. Rýchly súhrn vlastností deliacej čiary: vlastnosť stĺpcových pravidiel

Vlastnosť column-rule je skratka pre vlastnosť column-rule-width column-rule-style column-rule-color.

Nehnuteľnosť sa nededí.

Syntax

Pravidlo stĺpca: bodkované; column-rule: solid 8px; stĺpcové pravidlo: plná modrá; stĺpcové pravidlo: hrubé vsadené modré; stĺpcové pravidlo: zdediť; stĺpcové pravidlo: počiatočné;

3. Zlomy stĺpca

Keď je obsah umiestnený vo viacerých stĺpcoch, prehliadač musí určiť, kde sa umiestnia zlomy stĺpcov. Problém rozdelenia obsahu do stĺpcov je podobný rozdeleniu obsahu na stránky. Na vyriešenie tohto problému boli zavedené tri nové vlastnosti, ktoré umožňujú popis zlomov stĺpcov v rovnakých vlastnostiach ako zlomy strán: break-before , break-after a break-inside .

4. Rozpätie stĺpcov: vlastnosť rozpätia stĺpcov

Vlastnosť column-span umožňuje, aby prvok zahŕňal viacero stĺpcov. Nie je uvedené pre kontajnerový blok, ale pre konkrétny prvok vo vnútri, napríklad pre hlavičku.

V budúcnosti bude možné zadať počet stĺpcov na rozpätie, podobne ako atribút colspan, ktorý možno použiť na bunku tabuľky, ale špecifikácia CSS3 má iba dve možné hodnoty: none a all .

Vlastnosť štandardne nefunguje vo Firefoxe. Používateľ musí túto funkciu explicitne povoliť, layout.css.column-span.enabled musí byť nastavený na hodnotu true . Ak chcete zmeniť nastavenia vo Firefoxe, prejdite na stránku about:config.

Nehnuteľnosť sa nededí.

Syntax

Rozpätie stĺpcov: žiadne; rozpätie stĺpcov: všetky; rozpätie stĺpcov: zdediť; rozpätie stĺpcov: počiatočné;

5. Vyplnenie stĺpcov obsahom: vlastnosť column-fill

Vlastnosť column-fill riadi, ako sú stĺpce vyplnené obsahom. Existujú dve stratégie na vyplnenie stĺpcov: stĺpce môžu byť zarovnané na výšku alebo nie. Ak sú stĺpce zarovnané, prehliadače by sa mali snažiť minimalizovať zmeny vo výške stĺpcov a zároveň brať do úvahy vynútené prestávky, vdovy, siroty a ďalšie vlastnosti, ktoré môžu výšku stĺpca ovplyvniť. Ak stĺpce nie sú zarovnané, vypĺňajú sa postupne, niektoré môžu byť vyplnené čiastočne alebo nevyplnené vôbec.

Nehnuteľnosť sa nededí.

Syntax

Plnenie stĺpcov: automatické; column-fill: balance; column-fill: balance-all; column-fill: dedit; column-fill: initial;

6. Pretečenie

6.1. Prepad vo vnútri viacstĺpcových kontajnerov

Okrem prípadov, keď by to spôsobilo zlomenie stĺpca, obsah, ktorý presahuje hranice stĺpca, presahuje jeho hranice a nie je orezaný. Týka sa to predovšetkým obrázkov. Ak chcete vyriešiť tento problém, musíte pre obrázky nastaviť nasledujúce vlastnosti:

Img ( zobraziť: blok; /*odstrániť spodnú výplň pod obrázkom*/ šírka: 100%; /*roztiahnuť obrázok na celú šírku kontajnerového bloku*/ )

6.2. Stránkovanie a pretečenie mimo viacstĺpcových kontajnerov

Obsah a deliace čiary, ktoré presahujú stĺpce na okrajoch viacstĺpcového kontajnera, sú orezané podľa vlastnosti pretečenia.

Kontajner s viacerými stĺpcami môže mať viac stĺpcov, ako má priestor, a to z dôvodu obmedzení výšky stĺpcov (napríklad výšky alebo maximálnej výšky) a explicitných zlomov stĺpcov. V tomto prípade sa v smere riadku vytvoria ďalšie stĺpce, ktoré sa presunú na nasledujúce strany.

The Modul rozloženia CSS s viacerými stĺpcami predlžuje režim rozloženia bloku umožňuje jednoduchú definíciu viacerých stĺpcov textu.Ľudia majú problémy s čítaním textu, ak sú riadky príliš dlhé; ak očiam trvá príliš dlho, kým sa presunú z konca jedného riadku na začiatok ďalšieho, stratia prehľad o tom, na ktorom riadku boli. Na maximálne využitie veľkej obrazovky by preto autori mali mať vedľa seba umiestnené stĺpce textu s obmedzenou šírkou, rovnako ako to robia noviny.

Bohužiaľ to nie je možné urobiť s CSS a HTML bez vynútenia zalamovania stĺpcov na pevných pozíciách alebo prísneho obmedzenia značiek povolených v texte alebo bez použitia hrdinského skriptovania. Toto obmedzenie je vyriešené pridaním nových vlastností CSS na rozšírenie tradičného režimu rozloženia blokov.

Pomocou stĺpcov

Počet a šírka stĺpcov

Dve vlastnosti CSS určujú, či a koľko stĺpcov sa zobrazí: column-count a column-width .

Vlastnosť column-count nastavuje počet stĺpcov na konkrétne číslo. napr.

Príklad 1

HTML

CSS

Výsledok

Zobrazí obsah v dvoch stĺpcoch (ak používate prehliadač kompatibilný s viacerými stĺpcami):

Vlastnosť column-width nastavuje minimálnu požadovanú šírku stĺpca. Ak nie je nastavený aj počet stĺpcov, prehliadač automaticky vytvorí toľko stĺpcov, koľko sa zmestí do dostupnej šírky.

Príklad 2

HTML

CSS

Výsledok

Vo viacstĺpcovom bloku obsah automaticky prechádza z jedného stĺpca do druhého podľa potreby. Všetky funkcie HTML, CSS a DOM sú podporované v rámci stĺpcov, rovnako ako úpravy a tlač.

Skratka stĺpcov

Webový dizajnér väčšinou použije jednu z dvoch vlastností CSS: column-count alebo column-width . Keďže hodnoty týchto vlastností sa neprekrývajú, je často vhodné použiť skrátené stĺpce. napr.

Deklaráciu CSS column-width: 12em možno nahradiť stĺpcami: 12em .

Príklad 3

HTML

CSS

Deklaráciu CSS column-count: 4 možno nahradiť stĺpcami: 4 .

Príklad 4

HTML

CSS

Výsledok

Dve deklarácie CSS column-width: 8em a column-count: 12 možno nahradiť stĺpcami: 12 8em .

Príklad 5

HTML

CSS

Výsledok

Výškové vyváženie

Špecifikácia CSS3 Column vyžaduje, aby výšky stĺpcov boli vyvážené: to znamená, že prehliadač automaticky nastaví maximálnu výšku stĺpca tak, aby boli výšky obsahu v každom stĺpci približne rovnaké. Firefox to robí.

V niektorých situáciách je však tiež užitočné explicitne nastaviť maximálnu výšku stĺpcov a potom rozložiť obsah počnúc prvým stĺpcom a vytvoriť toľko stĺpcov, koľko je potrebné, prípadne pretekajúcich doprava. Preto, ak je výška obmedzená, nastavením vlastností CSS height alebo max-height na viacstĺpcovom bloku môže každý stĺpec rásť do tejto výšky a nie ďalej pred pridaním nového stĺpca. Tento režim je tiež oveľa efektívnejší z hľadiska rozloženia.

Medzery v stĺpcoch

Medzi stĺpmi je medzera. Odporúčaná predvolená hodnota je 1 em . Túto veľkosť je možné zmeniť použitím vlastnosti column-gap na viacstĺpcový blok:

Príklad 6

HTML

CSS

Výsledok

Pôvabná degradácia

Prehliadače, ktoré nepodporujú stĺpce, budú vlastnosti stĺpcov ignorovať. Preto je relatívne jednoduché vytvoriť rozloženie, ktoré sa v týchto prehliadačoch zobrazí v jednom stĺpci a v podporných prehliadačoch použije viacero stĺpcov.

Záver

Stĺpce CSS3 predstavujú primitívne rozloženie, ktoré pomôže webovým vývojárom čo najlepšie využiť priestor na obrazovke. Nápadití vývojári pre ne môžu nájsť mnoho využití, najmä s funkciou automatického vyrovnávania výšky.

Ako usporiadať text na stránke do niekoľkých stĺpcov? A dá sa to urobiť automaticky? Určite sa mnohí z vás, ktorí sa venujú alebo venovali vývoju webu, stretli s týmto problémom – a často narážajú na zložité riešenia, ktoré si vyžadujú zložité štýly alebo použitie ďalších JavaScriptových knižníc (pozri napríklad plugin Columnizer pre jQuery).

Viacstĺpcové rozloženie obsahu (nezamieňať s úlohou všeobecného viacstĺpcového rozloženia stránky, ktoré je skôr bližšie k problému usporiadania blokov na mriežke) si vo svete webových štandardov razí cestu už dlho. a napokon nielenže dosiahol stav odporúčania kandidáta vo forme zodpovedajúceho modulu CSS3 Multi -column Layout , ale získal aj pomerne širokú podporu v prehliadačoch: niekde s predponami (-moz- alebo -webkit-) a niekde v aktuálnom (Opera 11.1+) a plánované verzie (IE10+) a okamžite bez predpon.

Komentujte
V prípade Internet Explorera 10 to automaticky znamená, že pri vývoji aplikácií v štýle Metro pre Windows 8 pomocou HTML/CSS/JS môžete použiť CSS3 Multi-column.

Pre účely tohto článku nebudem používať predpony prehliadača na zmätenie kódu, no v reálnom živote nezabudnite pridať podporu prefixov pre Firefox, Safari a Chrome.

Dovoľte mi hneď poznamenať ešte dva dôležité detaily.
Po prvé, vo väčšine prípadov možno použitie viacstĺpcového rozloženia pre text považovať za vývoj zobrazovania obsahu stránok na ceste progresívneho vylepšenia, v rámci ktorej používatelia modernejších stránok dostanú viac vychytávok:

Po druhé, viacstĺpcové zobrazenie dobre zapadá do možností Media Queries (a responzívnych návrhových nápadov), napríklad pri rôznych veľkostiach obrazovky môžete formátovať text v rôznom počte stĺpcov:

A posledná vec, ktorú by som rád poznamenal v úvode, aby som sa tým ďalej nezdržiaval a s čistým svedomím prešiel k technickým detailom: pri použití viacstĺpcového rozloženia textu treba pamätať na to, že takéto usporiadanie tiež predpokladá určité poradie čítania (pre európske jazyky zľava doprava). Preto je dôležité, aby ste na presun pohľadu z jedného stĺpca do druhého vykonali čo najmenej dodatočných akcií, najmä pokiaľ ide o zvislé zvitky:

V tomto zmysle je horizontálny charakter stĺpcov lepšie kombinovaný s horizontálnym posúvaním (ako sa používa v mnohých aplikáciách Win8 - napríklad je to jasne viditeľné v aplikácii USA Today):

Vo všeobecnosti sú reproduktory skvelé, no netreba zabúdať ani na používateľský zážitok. A teraz do boja!

Stĺpce

Ak chcete zmeniť takýto prvok na viacstĺpcový, musíte nastaviť jednu z vlastností prostredníctvom štýlov CSS: šírka stĺpca alebo počet stĺpcov v inom význame ako auto. Napríklad,
Ak chcete rozdeliť text do dvoch stĺpcov, postupujte takto:

Článok (počet stĺpcov: 2; )

O zvyšok sa postará prehliadač:

Alternatívna nehnuteľnosť - šírka stĺpca— umožňuje nastaviť optimálnu šírku stĺpca:

Článok (šírka stĺpca: 150px; )

V tomto prípade prehliadač sám rozdelí obsah do požadovaného počtu stĺpcov, aby vyplnil vonkajší kontajner, pričom sa prispôsobí zadanej šírke stĺpca. Dôležitým bodom je to skutočná šírka sa môže líšiť od špecifikovanej hore alebo dole: na obrázku vyššie je sivý pruh široký presne 150 pixelov – a ako vidíte, je menší ako skutočná šírka stĺpca.

Toto správanie je definované špecifikáciou a umožňuje (automaticky) väčšiu flexibilitu pri vývoji responzívneho značkovania:

Ak máte napríklad kontajner so šírkou 100 pixelov a nastavíte stĺpce na šírku 45 pixelov, prehliadač bude brať do úvahy, že sa zmestia iba dva stĺpce, a aby zaplnil celý priestor, zväčší veľkosť každého na 50 pixelov. (Tým sa zohľadňuje aj priestor medzi stĺpcami, o ktorom sa bude diskutovať v ďalšej časti.)

V istom zmysle to možno považovať za alternatívu k používaniu Media Queries na zadanie iného počtu stĺpcov v závislosti od veľkosti okna a automatického výpočtu šírky stĺpcov:

@media (min-width:400px) ( article ( column-count: 2; ) ) @media (min-width:600px) ( article ( column-count: 3; ) ) ...

Toto je druhýkrát, čo hovorím o alternatíve – a tu je dôvod.

počítať vs. šírka

• počet stĺpcov umožňuje určiť počet stĺpcov, do ktorých chcete obsah rozdeliť, pričom šírku stĺpcov určuje prehliadač s prihliadnutím na dostupný priestor.
• šírka stĺpca prichádza z opačnej strany: udáva, aké by stĺpce približne mali byť, výpočet ich počtu však necháva na uváženie prehliadača.

Stĺpce: 12em; /* sirka stĺpca: 12em; počet stĺpcov: auto; */ stĺpce: 2; /* sirka stĺpca: auto; počet stĺpcov: 2; */ stĺpce: auto; /* sirka stĺpca: auto; počet stĺpcov: auto; */ stĺpce: auto 12em; /* sirka stĺpca: 12em; počet stĺpcov: auto; */ stĺpce: 2 auto; /* sirka stĺpca: auto; počet stĺpcov: 2; */

Čo sa stane, ak zadáte počet stĺpcov aj optimálnu šírku? Podľa špecifikácie v tomto prípade počet stĺpcov určuje maximálny počet stĺpcov:

Článok ( columns: 150px 3; /* column-width: 150px; column-count: 3; */ )

V skutočnosti, keď sledujem vývoj webových štandardov, vrátane niektorých mojich článkov o CSS3 (pozri napríklad), dúfam, že nie ste o nič menej inšpirovaní príležitosťami, ktoré sa otvárajú pre webových vývojárov. Adaptívne, flexibilné a výkonné nástroje na správu umiestňovania obsahu sú čoraz bližšie a dostupnejšie. A riešenie zložitých problémov je čoraz jednoduchšie.

Interaktívne

Vyskúšajte, experimentujte. Nahláste chyby vývojárom prehliadačov. A nezabudnite myslieť na to, čo uvidia používatelia starších (a zdanlivo moderných, no stále nie úplne štandardných) prehliadačov – napríklad môžete použiť plugin pre jQuery Columnizer. Pamätajte na prispôsobivosť a divákov malých a veľkých obrazoviek.

Ako usporiadať text na stránke do niekoľkých stĺpcov? A dá sa to urobiť automaticky? Určite sa mnohí z vás, ktorí sa venujú alebo venovali vývoju webu, stretli s týmto problémom – a často narážajú na zložité riešenia, ktoré si vyžadujú zložité štýly alebo použitie ďalších JavaScriptových knižníc (pozri napríklad plugin Columnizer pre jQuery).

Viacstĺpcové rozloženie obsahu (nezamieňať s úlohou všeobecného viacstĺpcového rozloženia stránky, ktoré je skôr bližšie k problému usporiadania blokov na mriežke) si vo svete webových štandardov razí cestu už dlho. a napokon nielenže dosiahol stav odporúčania kandidáta vo forme zodpovedajúceho modulu CSS3 Multi -column Layout , ale získal aj pomerne širokú podporu v prehliadačoch: niekde s predponami (-moz- alebo -webkit-) a niekde v aktuálnom (Opera 11.1+) a plánované verzie (IE10+) a okamžite bez predpon.

Komentujte
V prípade Internet Explorera 10 to automaticky znamená, že pri vývoji aplikácií v štýle Metro pre Windows 8 pomocou HTML/CSS/JS môžete použiť CSS3 Multi-column.

Pre účely tohto článku nebudem používať predpony prehliadača na zmätenie kódu, no v reálnom živote nezabudnite pridať podporu prefixov pre Firefox, Safari a Chrome.

Dovoľte mi hneď poznamenať ešte dva dôležité detaily.
Po prvé, vo väčšine prípadov možno použitie viacstĺpcového rozloženia pre text považovať za vývoj zobrazovania obsahu stránok na ceste progresívneho vylepšenia, v rámci ktorej používatelia modernejších stránok dostanú viac vychytávok:

Po druhé, viacstĺpcové zobrazenie dobre zapadá do možností Media Queries (a responzívnych návrhových nápadov), napríklad pri rôznych veľkostiach obrazovky môžete formátovať text v rôznom počte stĺpcov:

A posledná vec, ktorú by som rád poznamenal v úvode, aby som sa tým ďalej nezdržiaval a s čistým svedomím prešiel k technickým detailom: pri použití viacstĺpcového rozloženia textu treba pamätať na to, že takéto usporiadanie tiež predpokladá určité poradie čítania (pre európske jazyky zľava doprava). Preto je dôležité, aby ste na presun pohľadu z jedného stĺpca do druhého vykonali čo najmenej dodatočných akcií, najmä pokiaľ ide o zvislé zvitky:

V tomto zmysle je horizontálny charakter stĺpcov lepšie kombinovaný s horizontálnym posúvaním (ako sa používa v mnohých aplikáciách Win8 - napríklad je to jasne viditeľné v aplikácii USA Today):

Vo všeobecnosti sú reproduktory skvelé, no netreba zabúdať ani na používateľský zážitok. A teraz do boja!

Stĺpce

Ak chcete zmeniť takýto prvok na viacstĺpcový, musíte nastaviť jednu z vlastností prostredníctvom štýlov CSS: šírka stĺpca alebo počet stĺpcov v inom význame ako auto. Napríklad,
Ak chcete rozdeliť text do dvoch stĺpcov, postupujte takto:

Článok (počet stĺpcov: 2; )

O zvyšok sa postará prehliadač:

Alternatívna nehnuteľnosť - šírka stĺpca— umožňuje nastaviť optimálnu šírku stĺpca:

Článok (šírka stĺpca: 150px; )

V tomto prípade prehliadač sám rozdelí obsah do požadovaného počtu stĺpcov, aby vyplnil vonkajší kontajner, pričom sa prispôsobí zadanej šírke stĺpca. Dôležitým bodom je to skutočná šírka sa môže líšiť od špecifikovanej hore alebo dole: na obrázku vyššie je sivý pruh široký presne 150 pixelov – a ako vidíte, je menší ako skutočná šírka stĺpca.

Toto správanie je definované špecifikáciou a umožňuje (automaticky) väčšiu flexibilitu pri vývoji responzívneho značkovania:

Ak máte napríklad kontajner so šírkou 100 pixelov a nastavíte stĺpce na šírku 45 pixelov, prehliadač bude brať do úvahy, že sa zmestia iba dva stĺpce, a aby zaplnil celý priestor, zväčší veľkosť každého na 50 pixelov. (Tým sa zohľadňuje aj priestor medzi stĺpcami, o ktorom sa bude diskutovať v ďalšej časti.)

V istom zmysle to možno považovať za alternatívu k používaniu Media Queries na zadanie iného počtu stĺpcov v závislosti od veľkosti okna a automatického výpočtu šírky stĺpcov:

@media (min-width:400px) ( article ( column-count: 2; ) ) @media (min-width:600px) ( article ( column-count: 3; ) ) ...

Toto je druhýkrát, čo hovorím o alternatíve – a tu je dôvod.

počítať vs. šírka

• počet stĺpcov umožňuje určiť počet stĺpcov, do ktorých chcete obsah rozdeliť, pričom šírku stĺpcov určuje prehliadač s prihliadnutím na dostupný priestor.
• šírka stĺpca prichádza z opačnej strany: udáva, aké by stĺpce približne mali byť, výpočet ich počtu však necháva na uváženie prehliadača.

Stĺpce: 12em; /* sirka stĺpca: 12em; počet stĺpcov: auto; */ stĺpce: 2; /* sirka stĺpca: auto; počet stĺpcov: 2; */ stĺpce: auto; /* sirka stĺpca: auto; počet stĺpcov: auto; */ stĺpce: auto 12em; /* sirka stĺpca: 12em; počet stĺpcov: auto; */ stĺpce: 2 auto; /* sirka stĺpca: auto; počet stĺpcov: 2; */

Čo sa stane, ak zadáte počet stĺpcov aj optimálnu šírku? Podľa špecifikácie v tomto prípade počet stĺpcov určuje maximálny počet stĺpcov:

Článok ( columns: 150px 3; /* column-width: 150px; column-count: 3; */ )

V skutočnosti, keď sledujem vývoj webových štandardov, vrátane niektorých mojich článkov o CSS3 (pozri napríklad), dúfam, že nie ste o nič menej inšpirovaní príležitosťami, ktoré sa otvárajú pre webových vývojárov. Adaptívne, flexibilné a výkonné nástroje na správu umiestňovania obsahu sú čoraz bližšie a dostupnejšie. A riešenie zložitých problémov je čoraz jednoduchšie.

Interaktívne

Vyskúšajte, experimentujte. Nahláste chyby vývojárom prehliadačov. A nezabudnite myslieť na to, čo uvidia používatelia starších (a zdanlivo moderných, no stále nie úplne štandardných) prehliadačov – napríklad môžete použiť plugin pre jQuery Columnizer. Pamätajte na prispôsobivosť a divákov malých a veľkých obrazoviek.