Jau daudzus gadus CSS pludiņi ir izveidojuši mazu, bet vēl nepieciełamu sastāvdaļu, veidojot vietnes izkārtojumu. Ja jūsu dizains aicināja izmantot vairākas kolonnas, jūs pievērsāt pludiņiem . Problēma ar šo metodi ir tā, ka, neskatoties uz neticamo atjautību, ko web dizaineri / izstrādātāji ir parādījuši, veidojot sarežģītas vietnes izkārtojumus, CSS pludiņi nekad nav pareizi izmantoti šādā veidā.
Kamēr pludiņiem un CSS pozicionēšanai noteikti būs vieta tīmekļa dizaina jomā daudzus gadus, jaunākas izkārtojuma metodes, tostarp CSS režģis un Flexbox, tagad ļauj tīmekļa dizaineriem jaunus veidus, kā veidot vietnes izkārtojumus. Vēl viena jauna izkārtojuma metode, kas parāda daudz potenciālu, ir CSS vairākas slejas.
CSS kolonnas ir bijušas aptuveni jau vairākus gadus, taču vecāku pārlūkprogrammu (jo īpaši vecāku Internet Explorer versiju) atbalsta trūkums daudziem interneta profesionāļiem ir saglabājis iespēju izmantot šos stilus savos produkcijas darbos.
Kad šo vecāko IE versiju atbalsts ir beigts, daži tīmekļa izstrādātāji tagad eksperimentē ar jaunām CSS izkārtojuma iespējām, iekļaujot CSS slejas, un konstatēja, ka viņiem ir daudz vairāk kontroles ar šīm jaunajām pieejām nekā to darot ar pludiņiem.
CSS kolonnu pamati
Kā norāda nosaukums, CSS vairākas slejas (pazīstams arī kā CSS3 vairāku sleju izkārtojums) ļauj sadalīt saturu noteiktā sleju skaitā. Visvienkāršākās CSS īpašības, kuras jūs izmantojat, ir:
- kolonnu skaits
- kolonna-atstarpe
Kolonnu skaitīšanai jūs norādiet vajadzīgo sleju skaitu. Kolonnu starpība būtu notekcaurules vai atstarpes starp šīm kolonnām. Pārlūks ņems šīs vērtības un sadalīs saturu vienmērīgi norādītajā slejā.
Parasti CSS vairāku sleju piemērs būtu sadalīt teksta satura bloku vairākās slejās, līdzīgi tam, ko jūs redzētu laikraksta rakstu. Pieņemsim, ka jums ir šāda HTML marķēšana (ņemiet vērā, ka, piemēram, mērķiem es sāku tikai vienu punktu, bet praksē šajā marķējumā varētu būt vairāki satura punkti):
Jūsu raksta virsraksts
Iedomājieties daudz teksta punktu šeit ...
Ja jūs pēc tam rakstījāt šos CSS stilus:
. saturs {-moz-kolonnu skaits: 3; -webkit-kolonnu skaits: 3; kolonnu skaits: 3; -moz-kolonna-atstarpe: 30 pikseļi; -webkit-kolonna-atstarpe: 30 pikseļi; kolonnas atstarpe: 30 pikseļi; }Šis CSS noteikums sadalītu "satura" sadalījumu 3 vienādās kolonnās ar 30 pikseļu atstarpi starp tām. Ja jūs vēlaties divas kolonnas, nevis 3, jūs vienkārši mainītu šo vērtību, un pārlūkprogramma aprēķinātu jauno sleju platumu, lai sadalītu saturu vienmērīgi. Ievērojiet, ka vispirms vispirms izmantojam pārdevēju priekšrocības, kam seko bezprefiksu deklarācijas.
Tikpat viegli, kā tas ir, tā izmantošana šādā veidā ir apšaubāma mājas lapas izmantošanai. Jā, jūs varat sadalīt vairākus kolonnas saturu, taču tas, visticamāk, nav vislabākais lasīšanas pieredze tīmeklī, it īpaši, ja šo kolonnu augstums nokrītas zem ekrāna "reizes".
Tad lasītājiem vajadzētu ritināt uz augšu un uz leju, lai lasītu pilnu saturu. Still, CSS kolonnu galvenais ir tikpat vienkāršs kā jūs redzat šeit, un to var izmantot daudz vairāk, nekā vienkārši sadalīt dažu punktu saturu - to var īsti izmantot izkārtojumam.
Izkārtojums ar CSS kolonnām
Pieņemsim, ka jums ir tīmekļa lapa ar satura apgabalu, kurā ir 3 satura slejas. Tas ir ļoti tipisks vietnes izkārtojums, un, lai sasniegtu šīs trīs kolonnas, parasti jūs peldat sadalījumus, kas atrodas collas. Ar CSS vairākkārtējām slejām ir daudz vieglāk.
Šeit ir daži HTML paraugi:
Jaunākās ziņas
Saturs būtu šeit ...
No mūsu emuāra
Saturs būtu šeit ...
Gaidāmie notikumi
p>
CSS, lai izveidotu šīs vairākas slejas, sākas ar iepriekš redzēto.
. saturs {-moz-kolonnu skaits: 3; -webkit-kolonnu skaits: 3; kolonnu skaits: 3; -moz-kolonna-atstarpe: 30 pikseļi; -webkit-kolonna-atstarpe: 30 pikseļi; kolonnas atstarpe: 30 pikseļi; }Tagad izaicinājums ir tāds, ka, jo pārlūks vēlas sadalīt šo saturu vienmērīgi, tādēļ, ja šo sadalījumu satura garums ir atšķirīgs, šis pārlūks faktiski sadalīs atsevišķa sadalījuma saturu, pievienojot tā sākumu vienai kolonnai un tad turpināt citā (jūs varat to redzēt, izmantojot šo kodu, lai palaistu eksperimentu un pievienotu dažādus satura garumus katrā nodaļā)!
Tas nav tas, ko vēlaties. Jūs vēlaties, lai katra no šīm nodaļām izveidotu atšķirīgu kolonnu un neatkarīgi no tā, cik liela vai maza ir atsevišķa sadalījuma saturs, jūs nekad nevēlaties to sadalīt. To varat panākt, pievienojot šo vienu papildu CSS rindiņu:
.content div {display: inline-block; }Tas liks tiem sadalījumiem, kas atrodas "satura" iekšienē, palikt neskartiem pat tad, ja pārlūks tiek sadalīts vairākās slejās. Vēl labāk, jo šeit šeit netika noteikts fiksēts platums, šīs kolonnas automātiski mainīsies, kad pārlūks mainīsies, padarot to par ideālu piemērotu reaģējošām vietnēm . Izmantojot šo "inline-block" stilu, katra jūsu 3 nodaļa būs atsevišķa satura sleja.
Kolonnas platuma izmantošana
Papildus "kolonnu skaitam" ir vēl viens īpašums, kuru varat izmantot, un atkarībā no jūsu izkārtojuma vajadzībām tā patiešām var būt labāka izvēle jūsu vietnei. Tas ir "kolonnas platums". Izmantojot to pašu HTML atzīmi, kā parādīts iepriekš, mēs to varējām izdarīt ar mūsu CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; sleja-platums: 500 pikseļi; -moz-kolonna-atstarpe: 30 pikseļi; -webkit-kolonna-atstarpe: 30 pikseļi; kolonnas atstarpe: 30 pikseļi; } .content div {display: inline-block; }Kā tas darbojas, pārlūks izmanto šo sleju platumu kā maksimālo šīs slejas vērtību. Tātad, ja pārlūkprogrammas logs ir mazāks par 500 pikseļiem, šīs 3 nodaļas parādīsies vienā kolonnā, kas ir viens no otrā virsotnes. Šis ir tipisks izkārtojums, ko izmanto mobilajiem / mazajiem ekrāna izkārtojumiem.
Tā kā pārlūka platums palielinās, lai ietilptu 2 kolonnas kopā ar norādītajām kolonnu atstarpēm, pārlūkprogramma automātiski iet no vienas kolonnas izkārtojuma uz divām kolonnām. Palieliniet ekrāna platumu, un galu galā, jūs saņemsiet 3 kolonnu dizainu, katra no mūsu 3 nodaļām parādīsies savā kolonnā. Atkal, tas ir lielisks veids, kā iegūt dažus atsaucīgus, ar daudziem ierīcēm draudzīgus izkārtojumus, un jums pat nav nepieciešams izmantot multivides vaicājumus, lai mainītu izkārtojuma stilus!
Citas kolonnas īpašības
Papildus šeit aprakstītajām īpašībām ir arī īpašības attiecībā uz sleju noteikšanu, tostarp krāsu, stilu un platuma vērtības, kas ļauj jums izveidot noteikumus starp jūsu kolonnām. Tās tiks izmantotas, nevis robežām, ja vēlaties izveidot dažas rindas, kas atdala jūsu kolonnas.
Laiks eksperimentēt
Pašlaik CSS vairāku sleju izkārtojums ir ļoti labi atbalstīts. Izmantojot prefiksus, vairāk nekā 94% tīmekļa lietotāju varētu redzēt šos stilus, un šī neatbalstītā grupa patiešām būtu tikai vecāka Internet Explorer versijas, kuras jūs jebkurā gadījumā vairs nevarat atbalstīt.
Ar šo atbalsta līmeni, kas šobrīd ir spēkā, nav iemesla neuzsākt eksperimentēšanu ar CSS kolonām un šo stilu izvietošanu ražošanas gatavās vietnēs. Jūs varat sākt savus eksperimentus, izmantojot šajā rakstā ietverto HTML un CSS, un spēlēt ar dažādām vērtībām, lai redzētu, kas vislabāk atbilstu jūsu vietnes izkārtojuma vajadzībām.