Nuosavybė įsilaužti į vidų apibrėžia puslapio lūžių ir stulpelių išdėstymo esamame elemente principus. Pagal numatytuosius nustatymus puslapių arba stulpelių lūžiai dedami automatiškai ir nėra paveldimi iš pirminių elementų. Puslapio vengimo reikšmė naudojama tik formatuojant puslapius sudarytus dokumentus, pvz., spausdinant, ir nepaisoma rodinių be puslapių, pvz., kai rodoma naršyklėje. Stulpelio vengimo reikšmė naudojama kelių stulpelių tekstui.

Galiojančios reikšmės

• CSS2 CSS3 automatinis- automatinis puslapio ar stulpelio lūžis prieš dabartinį elementą (numatytasis)
• CSS2 CSS3 vengti
• CSS3 išvengti-puslapis- atšaukti puslapio pertrauką esamame elemente
• CSS3 išvengti-stulpelis- stulpelio pertraukos atšaukimas esamo elemento viduje

Naudojimo pavyzdžiai

įsilaužimas į vidų: auto; - vienodas paskirstymas

Vienodas turinio paskirstymas tarp stulpelių, kai pertraukos automatiškai dedamos tinkamiausiose vietose bet kuriuose elementuose arba tarp jų. Esant tolygiai paskirstymui, stulpelių aukštis yra maždaug toks pat, esant daugiau ar mažiau vienodam teksto tankiui.

Stilius (stulpelių skaičius: 3; tarpas tarp stulpelių: 2 em; stulpelio taisyklė: 1 piks. solidinis #666; )

Tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas teksto tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas teksto tekstas

įsilaužti į vidų: vengti stulpelio; - atšaukti stulpelių pertraukas

Stilius ( stulpelių skaičius: 3; stulpelių tarpas: 2 em; stulpelio taisyklė: 1 piks. solidinis #666; ) .style div ( break-inside: vengti stulpelio; )

1 blokas teksto tekstas tekstas tekstas tekstas tekstas tekstas tekstinis tekstas

2-as blokas teksto tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstinis tekstas

3 blokas teksto tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas teksto tekstas

Įsilaužimo ypatybė apibrėžta CSS 3 kelių stulpelių išdėstymo modulio specifikacijoje, taikoma bloko lygio elementams ir galioja visose puslapio laikmenose, jos reikšmė nepaveldima iš pirminio elemento dokumento hierarchijoje, o pagal nutylėjimą automatinis. Šiuo metu nuosavybė palaikoma visose pagrindinėse naršyklėse.

Taip pat žiūrėkite:

• break-after – stulpelio arba puslapio lūžio po elemento nustatymo taisyklės
• break-befor – stulpelio arba puslapio lūžio prieš elementą nustatymo taisyklės
• -webkit-column-break-after - taisyklės, kaip nustatyti stulpelio pertrauką po elemento
• -webkit-column-break-befor - stulpelio lūžio prieš elementą nustatymo taisyklės
• -webkit-column-break-inside – taisyklės, kaip nustatyti stulpelio lūžį elemento viduje

Modulis CSS3 stulpeliai aprašomas kelių stulpelių išdėstymas, leidžiantis tvarkyti turinį taip, kad jis apimtų kelis vertikalius konteinerius, panašiai kaip laikraštis ar žurnalas. Stulpeliuose gali būti antraštės, tekstas, lentelės, paveikslėliai ir bet kokie kiti įterptieji elementai.

Kelių stulpelių modelis

Naršyklės palaikymas

T.Y: 10
Kraštas: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 - žiniatinklio rinkinys-
Safari: 9, 3.1 - žiniatinklio rinkinys-
Opera: 37, 11.5 -Webkit-
iOS Safari: 9, 3.2 - žiniatinklio rinkinys-
UC naršyklė, skirta „Android“: 11.8
„Chrome“, skirta „Android“: 73
„Samsung“ internetas: 5, 4 - žiniatinklio rinkinys-

Senasis įrašas

2012 m. lapkričio 24 d

15 žaviausių mažų miestelių Anglijoje

1. Berwick-upon-Tweed

Berwickas buvo įkurtas kaip anglosaksų gyvenvietė Nortumbrijos karalystės laikais, kurią 10 amžiuje aneksavo Anglija. Vietovė daugiau nei 400 metų buvo istorinių pasienio karų tarp Anglijos ir Škotijos karalystės centrinė vieta, o Berwicko valdymas kelis kartus keitė abiejų karalysčių rankas. Paskutinį kartą jis pakeitė savininkus, kai Ričardas iš Glosterio 1482 m. jį perėmė Anglijai. Iki šiol daugelis Berwickerių jaučia artimą ryšį su Škotija.

Šiais laikais Berwick-upon-Tweed yra gausiai lankomas dėl savo puikiai matomos istorijos: viduramžių miesto sienos, Elžbietos laikų pylimai, XIII a. pilies griuvėsiai, XVII a. „Senasis tiltas“, rotušė, seniausios Britanijos kariuomenės kareivinės, šiauriausias Anglijos viešbutis ir kt. .

2.Rugiai

Senoviniai rugiai – tai visos akmenimis grįstos gatvės ir griūvančios namų eilės prie jūros. Iš pradžių priklausę Cinque Ports Confederation, penki strateginiai miestai, svarbūs viduramžiais prekybai ir kariniais tikslais, šiandien Rugiai yra praktiškai gyvas muziejus. Rugių pilį, populiariai žinomą kaip Ypres bokštas, 1249 m. pastatė Henrikas III, kad apsisaugotų nuo dažnų prancūzų antskrydžių; dar senesnė, normanų laikų Šv. Marijos bažnyčia žvelgia į miestą. Rye taip pat yra vos kelios minutės kelio nuo vieno garsiausių Anglijos paplūdimių Camber Sands, dviejų mylių ilgio jėgos aitvarų ir paplūdimio mėgėjų žaidimų aikštelės.

1 pav. Kelių stulpelių išdėstymo pavyzdys

1. Stulpelių skaičius ir plotis

Kuriant kelių stulpelių išdėstymą labai svarbu nustatyti stulpelių skaičių ir plotį. Stulpelių skaičiaus ir pločio ypatybės naudojamos stulpelių skaičiui ir pločiui nustatyti.

Trečioji ypatybė, stulpeliai, yra trumpoji savybė, kuri vienu metu nustato stulpelių plotį ir skaičių.

Kiti veiksniai, pvz., aiškūs stulpelių lūžiai, turinio ir aukščio apribojimai, gali turėti įtakos faktiniam stulpelių skaičiui ir pločiui.

1.1. Stulpelio plotis: stulpelio pločio savybė

Stulpelio pločio ypatybė nurodo minimalų plotį, kurį turi užimti kiekvienas stulpelis.

Turtas nepaveldimas.

Sintaksė

Stulpelio plotis: automatinis; stulpelio plotis: 100 pikselių; stulpelio plotis: 10em; kolonėlės plotis: 3,3vw; stulpelio plotis: paveldėti; stulpelio plotis: pradinis;

1.2. Stulpelių skaičius: stulpelių skaičiaus savybė

Stulpelių skaičiaus savybė apibūdina stulpelių skaičių, o jų plotis bus apskaičiuojamas pagal laisvos vietos plotį. Jei stulpelio plotis nurodomas tuo pačiu metu kaip ir stulpelių skaičius , stulpelių skaičius bus laikomas didžiausiu stulpelių skaičiumi.

Turtas nepaveldimas.

Sintaksė

Stulpelių skaičius: automatinis; stulpelių skaičius: 2; stulpelių skaičius: paveldėti; stulpelių skaičius: pradinis;

1.3. Stulpelių nustatymas naudojant atskirų stulpelių nuosavybę

Stulpelių ypatybė yra trumpoji ypatybė, skirta stulpelių pločiui ir stulpelių skaičiui nustatyti. Praleistos reikšmės nustatomos į pradines vertes.

Turtas nepaveldimas.

Sintaksė

Stulpeliai: 12em; /* stulpelio plotis: 12em; stulpelių skaičius: automatinis */ stulpeliai: auto 12em; /* stulpelio plotis: 12em; stulpelių skaičius: automatinis */ stulpeliai: 2; /* stulpelio plotis: automatinis; stulpelių skaičius: 2 */ stulpeliai: 2 automatiniai; /* stulpelio plotis: automatinis; stulpelių skaičius: 2 */ stulpeliai: automatinis; /* stulpelio plotis: automatinis; stulpelių skaičius: automatinis */ stulpeliai: automatinis automatinis; /* stulpelio plotis: automatinis; stulpelių skaičius: automatinis */ stulpeliai: paveldėti; stulpeliai: pradinis;

2. Tarpai tarp stulpelių ir skiriamųjų linijų

Stulpelių tarpai ir skiriamosios linijos dedamos tarp stulpelių viename kelių stulpelių konteineryje. Tarpų ir separatorių ilgis lygus stulpelio aukščiui. Stulpelių tarpai užima vietą, tai yra, jie išstumia gretimų stulpelių turinį.

Skiriamoji linija brėžiama tarpo tarp stulpelių viduryje, neužimant vietos. Tai reiškia, kad skiriamosios linijos buvimas ar storis nieko kito nepakeis.

Linijos nudažytos tiesiai virš kelių stulpelių elemento kraštinės. Jei elementas turi slenkamą sritį, skiriamosios linijos slenka kartu su stulpeliais. Skiriamosios linijos rodomos tik tarp dviejų stulpelių, turinčių turinį.

2.1. Tarpai tarp stulpelių: stulpelio tarpo savybė

Stulpelio tarpo ypatybė apibrėžia tarpą tarp stulpelių. Jei stulpelių skiriamąją liniją nustatysite naudodami stulpelio taisyklės ypatybę, ši linija bus tarpo viduryje ir jos plotis nepakeis bendro pločio.

Turtas nepaveldimas.

Sintaksė

Stulpelis-tarpelis: normalus; stulpelio tarpas: 3 pikseliai; stulpelio tarpas: 2,5 em; stulpelio tarpas: 3%; stulpelio tarpas: paveldėti; stulpelio tarpas: pradinis;

2.2. Skiriamosios linijos spalva: stulpelio-taisyklės-spalvos savybė

Stulpelio taisyklės spalvos ypatybė nurodo skiriamosios linijos spalvą.

Turtas nepaveldimas.

Sintaksė

Stulpelis-taisyklė-spalva: rožinė; stulpelis-taisyklė-spalva: #D71C3B; stulpelis-taisyklė-spalva: rgb(192, 56, 78); stulpelis-taisyklė-spalva: skaidri; stulpelis-taisyklė-spalva: hsla(0, 100%, 50%, 0,6); stulpelis-taisyklė-spalva: paveldėti; stulpelis-taisyklė-spalva: inicialas;

2.3. Skiriamosios linijos stilius: stulpelio-taisyklės stiliaus nuosavybė

Stulpelio taisyklės stiliaus ypatybė nustato skiriamosios linijos stilių.

Turtas nepaveldimas.

Sintaksė

Stulpelio taisyklės stilius: nėra; stulpelio taisyklės stilius: paslėptas; stulpelio taisyklės stilius: taškuotas; stulpelio taisyklės stilius: brūkšninis; stulpelio taisyklės stilius: vientisas; stulpelio taisyklės stilius: dvigubas; stulpelis-taisyklė-stilius: griovelis; stulpelis-taisyklė-stilius: kraigas; stulpelio taisyklės stilius: įdėklas; stulpelis-taisyklė-stilius:pradžioje; stulpelis-taisyklė-stilius: paveldėti; stulpelis-taisyklė-stilius: inicialas;

2.4. Skirstytuvo linijos plotis: stulpelio-taisyklės-pločio savybė

Stulpelio taisyklės pločio ypatybė nustato skiriamosios linijos plotį. Neigiamos reikšmės neleidžiamos. Neveikia be stulpelio taisyklės stiliaus nuosavybės.

Turtas nepaveldimas.

Sintaksė

Stulpelio-taisyklės plotis: plonas; stulpelio taisyklės plotis: vidutinis; stulpelio-taisyklės plotis: storas; stulpelio-taisyklės plotis: 1px; stulpelio-taisyklės plotis: 2,5em; stulpelis-taisyklė-plotis: paveldėti; stulpelio-taisyklės plotis: pradinis;

2.5. Greita skiriamosios linijos savybių santrauka: stulpelio taisyklės ypatybė

Stulpelio taisyklės ypatybė yra stulpelio taisyklės pločio stulpelio taisyklė stiliaus stulpelio taisyklės spalvos santrumpa.

Turtas nepaveldimas.

Sintaksė

Stulpelis-taisyklė: taškuotas; stulpelio taisyklė: vientisas 8px; stulpelio taisyklė: vientisa mėlyna; stulpelio taisyklė: stora įdėta mėlyna; stulpelis-taisyklė: paveldėti; stulpelis-taisyklė: inicialas;

3. Stulpelių lūžiai

Kai turinys dedamas į kelis stulpelius, naršyklė turi nustatyti, kur dedami stulpelių lūžiai. Turinio skaidymo į stulpelius problema yra panaši į turinio skaidymą į puslapius. Siekiant išspręsti šią problemą, buvo pristatytos trys naujos ypatybės, leidžiančios stulpelių lūžius aprašyti tose pačiose ypatybėse kaip ir puslapio lūžiai: break-for, break-after ir break-inside .

4. Stulpelių ilgis: stulpelio tarpo savybė

Stulpelio ilgio savybė leidžia elementui apimti kelis stulpelius. Jis nurodomas ne konteinerio blokui, o konkrečiam elementui viduje, pavyzdžiui, antraštei.

Ateityje bus galima nurodyti stulpelių, kuriuos reikia apimti, skaičių, panašiai kaip colspan atributas, kuris gali būti taikomas lentelės langeliui, tačiau CSS3 specifikacija turi tik dvi galimas reikšmes: none ir all .

Savybė pagal numatytuosius nustatymus neveikia „Firefox“. Naudotojas turi aiškiai įgalinti funkciją, o layout.css.column-span.enabled turi būti nustatyta kaip true . Norėdami pakeisti „Firefox“ nustatymus, eikite į about:config.

Turtas nepaveldimas.

Sintaksė

Stulpelio tarpatramis: nėra; stulpelio tarpas: visi; stulpelio tarpatramis: paveldėti; stulpelio tarpas: pradinis;

5. Stulpelių užpildymas turiniu: stulpelio užpildymo savybė

Stulpelių užpildymo ypatybė valdo, kaip stulpeliai užpildomi turiniu. Yra dvi stulpelių užpildymo strategijos: stulpeliai gali būti sulygiuoti pagal aukštį arba ne. Jei stulpeliai sulygiuoti, naršyklės turėtų stengtis sumažinti stulpelių aukščio pokyčius, kartu atsižvelgdamos į priverstines pertraukas, našles, našlaičius ir kitas ypatybes, kurios gali turėti įtakos stulpelio aukščiui. Jei stulpeliai nesulygiuoti, jie pildomi nuosekliai, kai kurie iš jų gali būti užpildyti iš dalies arba visai neužpildyti.

Turtas nepaveldimas.

Sintaksė

Stulpelių užpildymas: automatinis; stulpelio užpildymas: balansas; stulpelio užpildymas: balansas-visas; stulpelio užpildymas: paveldėti; stulpelio užpildymas: pradinis;

6. Perpildymas

6.1. Perpildymas kelių stulpelių konteineriuose

Išskyrus tuos atvejus, kai dėl to stulpelis nutrūktų, turinys, išeinantis už stulpelio ribų, išeina už stulpelio ribų ir nėra nutrauktas. Tai visų pirma taikoma vaizdams. Norėdami išspręsti šią problemą, turite nustatyti šias vaizdų ypatybes:

Img (rodyti: blokuoti; /*pašalinti apatinį užpildą po vaizdu*/ plotis: 100%; /*ištempti vaizdą iki viso konteinerio bloko pločio*/ )

6.2. Puslapių spausdinimas ir perpildymas ne kelių stulpelių konteineriuose

Turinys ir skiriamosios linijos, einančios už stulpelių kelių stulpelių konteinerio kraštuose, yra nukirptos pagal perpildymo savybę.

Kelių stulpelių sudėtiniame rodinyje gali būti daugiau stulpelių nei jame yra vietos dėl stulpelio aukščio apribojimų (pvz., aukščio arba maksimalaus aukščio) ir aiškių stulpelių lūžių. Tokiu atveju sukuriami papildomi stulpeliai eilutės kryptimi, pereinant į kitus puslapius.

The CSS kelių stulpelių išdėstymo modulis pratęsia bloko išdėstymo režimas kad būtų galima lengvai apibrėžti kelis teksto stulpelius.Žmonėms sunku skaityti tekstą, jei eilutės per ilgos; jei akys per ilgai pereina nuo vienos eilutės pabaigos iki kitos pradžios, jos praranda atspėjimą, kurioje eilutėje buvo. Todėl norėdami maksimaliai išnaudoti didelį ekraną, autoriai turėtų turėti riboto pločio teksto stulpelius, išdėstytus vienas šalia kito, kaip tai daro laikraščiai.

Deja, tai neįmanoma padaryti naudojant CSS ir HTML, neverčiant stulpelių pertraukų fiksuotose pozicijose, griežtai neapribojant tekste leidžiamo žymėjimo arba naudojant herojišką scenarijų. Šis apribojimas išspręstas pridedant naujų CSS ypatybių, siekiant išplėsti tradicinį blokų išdėstymo režimą.

Naudojant stulpelius

Stulpelių skaičius ir plotis

Dvi CSS ypatybės valdo, ar bus rodoma stulpelių ir kiek jų bus: stulpelių skaičius ir stulpelio plotis .

Stulpelių skaičiaus nuosavybė nustato stulpelių skaičių į tam tikrą skaičių. Pvz.,

1 pavyzdys

HTML

CSS

Rezultatas

Turinys bus rodomas dviem stulpeliais (jei naudojate su keliais stulpeliais suderinamą naršyklę):

Stulpelio pločio ypatybė nustato mažiausią pageidaujamą stulpelio plotį. Jei stulpelių skaičius taip pat nenustatytas, naršyklė automatiškai sukurs tiek stulpelių, kiek telpa į turimą plotį.

2 pavyzdys

HTML

CSS

Rezultatas

Kelių stulpelių bloke turinys automatiškai perkeliamas iš vieno stulpelio į kitą pagal poreikį. Visos HTML, CSS ir DOM funkcijos palaikomos stulpeliuose, taip pat redagavimas ir spausdinimas.

Stulpelių stenografija

Dažniausiai žiniatinklio dizaineris naudoja vieną iš dviejų CSS ypatybių: stulpelių skaičius arba stulpelio plotis . Kadangi šių savybių reikšmės nesutampa, dažnai patogu naudoti trumpinius stulpelius. Pvz.

CSS deklaracijos stulpelio plotis: 12em gali būti pakeistas stulpeliais: 12em .

3 pavyzdys

HTML

CSS

CSS deklaracijos stulpelių skaičius: 4 gali būti pakeistas stulpeliais: 4 .

4 pavyzdys

HTML

CSS

Rezultatas

Dvi CSS deklaracijos stulpelių plotis: 8em ir stulpelių skaičius: 12 gali būti pakeisti stulpeliais: 12 8em .

5 pavyzdys

HTML

CSS

Rezultatas

Aukščio balansavimas

CSS3 stulpelio specifikacija reikalauja, kad stulpelių aukščiai būtų subalansuoti: tai yra, naršyklė automatiškai nustato maksimalų stulpelio aukštį, kad kiekvieno stulpelio turinio aukščiai būtų maždaug vienodi. Firefox tai daro.

Tačiau kai kuriose situacijose taip pat naudinga aiškiai nustatyti maksimalų stulpelių aukštį, o tada išdėstyti turinį, pradedant nuo pirmojo stulpelio ir sukuriant tiek stulpelių, kiek reikia, galbūt perpildant į dešinę. Todėl, jei aukštis apribotas, kelių stulpelių bloke nustačius CSS aukščio arba maksimalaus aukščio ypatybes, kiekvienam stulpeliui leidžiama augti iki tokio aukščio ir ne daugiau, prieš pridedant naują stulpelį. Šis režimas taip pat yra daug efektyvesnis maketavimui.

Stulpelių tarpai

Tarp stulpelių yra tarpas. Rekomenduojamas numatytasis dydis yra 1 em . Šį dydį galima pakeisti kelių stulpelių blokui pritaikius stulpelio tarpo savybę:

6 pavyzdys

HTML

CSS

Rezultatas

Grakštus degradavimas

Stulpelių ypatybių tiesiog nepaisys stulpelių nepalaikančios naršyklės. Todėl gana lengva sukurti išdėstymą, kuris tose naršyklėse būtų rodomas viename stulpelyje, o palaikomose naršyklėse būtų naudojami keli stulpeliai.

Išvada

CSS3 stulpeliai yra primityvus išdėstymas, kuris padės žiniatinklio kūrėjams geriausiai išnaudoti ekrano nekilnojamąjį turtą. Vaizdingi kūrėjai gali rasti daug jų panaudojimo būdų, ypač naudojant automatinio aukščio balansavimo funkciją.

Kaip išdėstyti tekstą puslapyje keliuose stulpeliuose? Ir ar tai galima padaryti automatiškai? Be abejo, daugelis iš jūsų, kurie dalyvauja ar buvo susiję su žiniatinklio kūrimu, susidūrė su šia problema ir dažnai susiduria su sudėtingais sprendimais, kuriems reikia sudėtingų stilių arba papildomų „JavaScript“ bibliotekų (žr., pavyzdžiui, „jQuery“ skirtą „Columnizer“ papildinį).

Kelių stulpelių turinio išdėstymas (nepainioti su bendro kelių stulpelių puslapio išdėstymo užduotimi, kuri yra artimesnė blokų išdėstymo tinklelyje problemai) jau seniai skinasi kelią žiniatinklio standartų pasaulyje. ir, galiausiai, ne tik pasiekė kandidato rekomendacijos būseną atitinkamo CSS3 kelių modulio stulpelio Išdėstymas , bet ir gavo gana platų palaikymą naršyklėse: kai kur su priešdėliais (-moz- arba -webkit-), o kažkur dabartinėje. (Opera 11.1+) ir planuojamos versijos (IE10+), ir iš karto be priešdėlių.

komentuoti
Internet Explorer 10 atveju tai automatiškai reiškia, kad galite naudoti CSS3 kelių stulpelių kurdami Metro stiliaus programas, skirtas Windows 8 naudodami HTML/CSS/JS.

Šiame straipsnyje nenaudosiu naršyklės priešdėlių, kad supainiočiau kodą, tačiau naudodami realų gyvenimą nepamirškite pridėti „Firefox“, „Safari“ ir „Chrome“ priešdėlių palaikymo.

Iš karto atkreipsiu dėmesį į dar dvi svarbias detales.
Pirma, daugeliu atvejų kelių stulpelių išdėstymo teksto naudojimas gali būti laikomas svetainės turinio rodymo tobulėjimu progresyviojo tobulinimo keliu, kurio metu modernesnių svetainių naudotojai gaus daugiau gėrybių:

Antra, kelių stulpelių ekranas puikiai dera su medijos užklausų galimybėmis (ir reaguojančiomis dizaino idėjomis), pavyzdžiui, esant skirtingam ekrano dydžiui, galite formatuoti tekstą skirtingu stulpelių skaičiumi:

Ir paskutinis dalykas, kurį norėčiau pastebėti įžangoje, kad nesigilinčiau ir ramia sąžine pereičiau prie techninių smulkmenų: naudojant kelių stulpelių teksto išdėstymą, reikia atsiminti, kad toks išdėstymas taip pat suponuoja tam tikra skaitymo tvarka (Europos kalboms – iš kairės į dešinę). Todėl svarbu, kad norint perkelti žvilgsnį iš vieno stulpelio į kitą, būtina atlikti kuo mažiau papildomų veiksmų, ypač kalbant apie vertikalius slinkimus:

Šia prasme horizontalus stulpelių pobūdis geriau derinamas su horizontaliu slinkimu (kaip naudojamas daugelyje Win8 programų – pavyzdžiui, tai aiškiai matoma programoje USA Today):

Apskritai garsiakalbiai yra puikūs, tačiau nepamirškite apie vartotojo patirtį. O dabar į mūšį!

Stulpeliai

Norėdami paversti tokį elementą kelių stulpelių elementu, turite nustatyti vieną iš ypatybių naudodami CSS stilius: stulpelio pločio arba stulpelių skaičiusį kitą reikšmę nei automatinis. Pavyzdžiui,
Norėdami padalyti tekstą į du stulpelius, tiesiog atlikite šiuos veiksmus:

Straipsnis ( stulpelių skaičius: 2; )

Naršyklė padarys visa kita:

Alternatyvi nuosavybė - stulpelio pločio— leidžia nustatyti optimalų stulpelio plotį:

Straipsnis ( stulpelio plotis: 150 piks.; )

Tokiu atveju pati naršyklė suskaido turinį į reikiamą skaičių stulpelių, kad užpildytų išorinį konteinerį, prisitaikydama prie nurodyto stulpelio pločio. Svarbus dalykas yra tas tikrasis plotis gali skirtis nuo nurodyto aukštyn arba žemyn: aukščiau esančiame paveikslėlyje pilka juosta yra lygiai 150 pikselių pločio – ir, kaip matote, ji yra mažesnė už tikrąjį stulpelio plotį.

Šis elgesys yra apibrėžtas specifikacijoje ir suteikia (automatiškai) didesnį lankstumą kuriant atsakingą žymėjimą:

Pavyzdžiui, jei turite 100 piks. pločio konteinerį ir nustatote 45 piks. pločio stulpelius, naršyklė laikys, kad tilps tik du stulpeliai, o kad užpildytų visą erdvę, padidins kiekvieno dydį iki 50 piks. (Taip pat atsižvelgiama į tarpą tarp stulpelių, kuris bus aptartas kitame skyriuje.)

Tam tikra prasme tai gali būti vertinama kaip alternatyva medijos užklausoms, norint nurodyti skirtingą stulpelių skaičių, atsižvelgiant į lango dydį, ir automatiškai apskaičiuoti stulpelių plotį:

@media (min-width:400px) ( straipsnis ( stulpelių skaičius: 2; ) ) @media (min-width:600px) ( straipsnis ( stulpelių skaičius: 3; ) ) ...

Tai jau antras kartas, kai kalbu apie alternatyvą – štai kodėl.

skaičiuoti vs. plotis

• stulpelių skaičius leidžia nurodyti stulpelių, į kuriuos norite padalinti turinį, skaičių, o stulpelių plotį nustato naršyklė, atsižvelgdama į laisvą erdvę.
• stulpelio pločio jis ateina iš kitos pusės: nurodo, kokie stulpeliai turėtų būti apytiksliai, tačiau jų skaičių skaičiuoti palieka naršyklės nuožiūrai.

Stulpeliai: 12em; /* stulpelio plotis: 12em; stulpelių skaičius: automatinis; */ stulpeliai: 2; /* stulpelio plotis: automatinis; stulpelių skaičius: 2; */ stulpeliai: auto; /* stulpelio plotis: automatinis; stulpelių skaičius: automatinis; */ stulpeliai: auto 12em; /* stulpelio plotis: 12em; stulpelių skaičius: automatinis; */ stulpeliai: 2 auto; /* stulpelio plotis: automatinis; stulpelių skaičius: 2; */

Kas atsitiks, jei nurodysite ir stulpelių skaičių, ir optimalų plotį? Pagal specifikaciją šiuo atveju stulpelių skaičius apibrėžia maksimalų stulpelių skaičių:

Straipsnis ( stulpeliai: 150 piks. 3; /* stulpelio plotis: 150 piks.; stulpelių skaičius: 3; */ )

Tiesą sakant, po žiniatinklio standartų kūrimo, įskaitant kai kuriuos mano straipsnius apie CSS3 (žr., pavyzdžiui, žr.), tikiuosi, kad jus ne mažiau įkvėps žiniatinklio kūrėjams atsiveriančios galimybės. Prisitaikantys, lankstūs ir galingi turinio paskirties vietos valdymo įrankiai tampa vis artimesni ir prieinamesni. O sudėtingas problemas spręsti darosi vis lengviau.

Interaktyvus

Išbandykite, eksperimentuokite. Praneškite apie klaidas naršyklės kūrėjams. Nepamirškite pagalvoti apie tai, ką matys senesnių (ir, atrodo, modernių, bet vis dar ne visiškai standartus atitinkančių) naršyklių vartotojai – pavyzdžiui, galite naudoti jQuery Columnizer įskiepį. Prisiminkite pritaikomumą ir mažų ir didelių ekranų žiūrovus.

Kaip išdėstyti tekstą puslapyje keliuose stulpeliuose? Ir ar tai galima padaryti automatiškai? Be abejo, daugelis iš jūsų, kurie dalyvauja ar buvo susiję su žiniatinklio kūrimu, susidūrė su šia problema ir dažnai susiduria su sudėtingais sprendimais, kuriems reikia sudėtingų stilių arba papildomų „JavaScript“ bibliotekų (žr., pavyzdžiui, „jQuery“ skirtą „Columnizer“ papildinį).

Kelių stulpelių turinio išdėstymas (nepainioti su bendro kelių stulpelių puslapio išdėstymo užduotimi, kuri yra artimesnė blokų išdėstymo tinklelyje problemai) jau seniai skinasi kelią žiniatinklio standartų pasaulyje. ir, galiausiai, ne tik pasiekė kandidato rekomendacijos būseną atitinkamo CSS3 kelių modulio stulpelio Išdėstymas , bet ir gavo gana platų palaikymą naršyklėse: kai kur su priešdėliais (-moz- arba -webkit-), o kažkur dabartinėje. (Opera 11.1+) ir planuojamos versijos (IE10+), ir iš karto be priešdėlių.

komentuoti
Internet Explorer 10 atveju tai automatiškai reiškia, kad galite naudoti CSS3 kelių stulpelių kurdami Metro stiliaus programas, skirtas Windows 8 naudodami HTML/CSS/JS.

Šiame straipsnyje nenaudosiu naršyklės priešdėlių, kad supainiočiau kodą, tačiau naudodami realų gyvenimą nepamirškite pridėti „Firefox“, „Safari“ ir „Chrome“ priešdėlių palaikymo.

Iš karto atkreipsiu dėmesį į dar dvi svarbias detales.
Pirma, daugeliu atvejų kelių stulpelių išdėstymo teksto naudojimas gali būti laikomas svetainės turinio rodymo tobulėjimu progresyviojo tobulinimo keliu, kurio metu modernesnių svetainių naudotojai gaus daugiau gėrybių:

Antra, kelių stulpelių ekranas puikiai dera su medijos užklausų galimybėmis (ir reaguojančiomis dizaino idėjomis), pavyzdžiui, esant skirtingam ekrano dydžiui, galite formatuoti tekstą skirtingu stulpelių skaičiumi:

Ir paskutinis dalykas, kurį norėčiau pastebėti įžangoje, kad nesigilinčiau ir ramia sąžine pereičiau prie techninių smulkmenų: naudojant kelių stulpelių teksto išdėstymą, reikia atsiminti, kad toks išdėstymas taip pat suponuoja tam tikra skaitymo tvarka (Europos kalboms – iš kairės į dešinę). Todėl svarbu, kad norint perkelti žvilgsnį iš vieno stulpelio į kitą, būtina atlikti kuo mažiau papildomų veiksmų, ypač kalbant apie vertikalius slinkimus:

Šia prasme horizontalus stulpelių pobūdis geriau derinamas su horizontaliu slinkimu (kaip naudojamas daugelyje Win8 programų – pavyzdžiui, tai aiškiai matoma programoje USA Today):

Apskritai garsiakalbiai yra puikūs, tačiau nepamirškite apie vartotojo patirtį. O dabar į mūšį!

Stulpeliai

Norėdami paversti tokį elementą kelių stulpelių elementu, turite nustatyti vieną iš ypatybių naudodami CSS stilius: stulpelio pločio arba stulpelių skaičiusį kitą reikšmę nei automatinis. Pavyzdžiui,
Norėdami padalyti tekstą į du stulpelius, tiesiog atlikite šiuos veiksmus:

Straipsnis ( stulpelių skaičius: 2; )

Naršyklė padarys visa kita:

Alternatyvi nuosavybė - stulpelio pločio— leidžia nustatyti optimalų stulpelio plotį:

Straipsnis ( stulpelio plotis: 150 piks.; )

Tokiu atveju pati naršyklė suskaido turinį į reikiamą skaičių stulpelių, kad užpildytų išorinį konteinerį, prisitaikydama prie nurodyto stulpelio pločio. Svarbus dalykas yra tas tikrasis plotis gali skirtis nuo nurodyto aukštyn arba žemyn: aukščiau esančiame paveikslėlyje pilka juosta yra lygiai 150 pikselių pločio – ir, kaip matote, ji yra mažesnė už tikrąjį stulpelio plotį.

Šis elgesys yra apibrėžtas specifikacijoje ir suteikia (automatiškai) didesnį lankstumą kuriant atsakingą žymėjimą:

Pavyzdžiui, jei turite 100 piks. pločio konteinerį ir nustatote 45 piks. pločio stulpelius, naršyklė laikys, kad tilps tik du stulpeliai, o kad užpildytų visą erdvę, padidins kiekvieno dydį iki 50 piks. (Taip pat atsižvelgiama į tarpą tarp stulpelių, kuris bus aptartas kitame skyriuje.)

Tam tikra prasme tai gali būti vertinama kaip alternatyva medijos užklausoms, norint nurodyti skirtingą stulpelių skaičių, atsižvelgiant į lango dydį, ir automatiškai apskaičiuoti stulpelių plotį:

@media (min-width:400px) ( straipsnis ( stulpelių skaičius: 2; ) ) @media (min-width:600px) ( straipsnis ( stulpelių skaičius: 3; ) ) ...

Tai jau antras kartas, kai kalbu apie alternatyvą – štai kodėl.

skaičiuoti vs. plotis

• stulpelių skaičius leidžia nurodyti stulpelių, į kuriuos norite padalinti turinį, skaičių, o stulpelių plotį nustato naršyklė, atsižvelgdama į laisvą erdvę.
• stulpelio pločio jis ateina iš kitos pusės: nurodo, kokie stulpeliai turėtų būti apytiksliai, tačiau jų skaičių skaičiuoti palieka naršyklės nuožiūrai.

Stulpeliai: 12em; /* stulpelio plotis: 12em; stulpelių skaičius: automatinis; */ stulpeliai: 2; /* stulpelio plotis: automatinis; stulpelių skaičius: 2; */ stulpeliai: auto; /* stulpelio plotis: automatinis; stulpelių skaičius: automatinis; */ stulpeliai: auto 12em; /* stulpelio plotis: 12em; stulpelių skaičius: automatinis; */ stulpeliai: 2 auto; /* stulpelio plotis: automatinis; stulpelių skaičius: 2; */

Kas atsitiks, jei nurodysite ir stulpelių skaičių, ir optimalų plotį? Pagal specifikaciją šiuo atveju stulpelių skaičius apibrėžia maksimalų stulpelių skaičių:

Straipsnis ( stulpeliai: 150 piks. 3; /* stulpelio plotis: 150 piks.; stulpelių skaičius: 3; */ )

Tiesą sakant, po žiniatinklio standartų kūrimo, įskaitant kai kuriuos mano straipsnius apie CSS3 (žr., pavyzdžiui, žr.), tikiuosi, kad jus ne mažiau įkvėps žiniatinklio kūrėjams atsiveriančios galimybės. Prisitaikantys, lankstūs ir galingi turinio paskirties vietos valdymo įrankiai tampa vis artimesni ir prieinamesni. O sudėtingas problemas spręsti darosi vis lengviau.

Interaktyvus

Išbandykite, eksperimentuokite. Praneškite apie klaidas naršyklės kūrėjams. Nepamirškite pagalvoti apie tai, ką matys senesnių (ir, atrodo, modernių, bet vis dar ne visiškai standartus atitinkančių) naršyklių vartotojai – pavyzdžiui, galite naudoti jQuery Columnizer įskiepį. Prisiminkite pritaikomumą ir mažų ir didelių ekranų žiūrovus.