Daudzus gadus, CSS peld ir bijuši smalks, tomēr nepieciešams komponents, veidojot vietņu izkārtojumus. Ja jūsu dizains prasīja vairākas kolonnas, jūs pievērsāties pludiņiem. Šīs metodes problēma ir tā, ka, neskatoties uz neticamo atjautību, ko tīmekļa dizaineri / izstrādātāji ir parādījuši, veidojot sarežģītu vietni izkārtojumi, CSS pludiņi nekad nebija domāti šādā veidā.
Kaut arī pludiņiem un CSS pozicionēšanai noteikti būs vieta tīmekļa dizainā daudzus gadus uz priekšu, jaunāks izkārtojums metodes, tostarp CSS Grid un Flexbox, tagad Web dizaineriem piedāvā jaunus veidus, kā izveidot savu vietņu izkārtojumu. Vēl viena jauna izkārtojuma tehnika, kas parāda lielu potenciālu, ir CSS vairākas kolonnas.
CSS kolonnas darbojas jau dažus gadus, taču vecākajās (galvenokārt vecākajās) pārlūkprogrammās trūkst atbalsta Internet Explorer versijas) daudziem tīmekļa profesionāļiem ir liegta šo stilu izmantošana ražošanā darbs.
Beidzoties šo vecāko IE versiju atbalstam, daži tīmekļa dizaineri tagad eksperimentē ar jaunu CSS izkārtojumu opcijas, iekļaujot CSS kolonnas, un atklājot, ka viņiem ir daudz lielāka kontrole ar šīm jaunajām pieejām nekā ar peld.
CSS kolonnu pamati
Kā norāda nosaukums, CSS vairākas kolonnas (pazīstamas arī kā CSS3 vairāku kolonnu izkārtojums) ļauj sadalīt saturu noteiktā kolonnu skaitā. Pamata CSS rekvizīti, kurus izmantosit, ir:
- kolonnu skaits
- kolonnu sprauga
Kolonnu skaitīšanai jūs norādāt vajadzīgo kolonnu skaitu. Kolonnu atstarpe būtu notekas vai atstatums starp šīm kolonnām. Pārlūkprogramma ņems šīs vērtības un vienmērīgi sadalīs saturu jūsu norādīto kolonnu skaitā.
Praksē kopīgs CSS vairāku kolonnu piemērs būtu teksta satura bloka sadalīšana vairākās kolonnās, līdzīgi tam, ko jūs redzētu laikraksta rakstā. Pieņemsim, ka jums ir šāds HTML marķējums (ņemiet vērā, ka, piemēram, mēs esam ievietojuši tikai sākumu viens punkts, bet praksē šajā marķējumā, iespējams, būs vairākas satura rindkopas):
Jūsu raksta virsraksts.
Iedomājieties daudz teksta rindkopu šeit ...
Ja pēc tam rakstījāt šos CSS stilus:
.content {
-moz-kolonnu skaits: 3;
-webkit-kolonnu skaits: 3;
kolonnu skaits: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
kolonnas atstarpe: 30 pikseļi;
}
Šis CSS noteikums sadalīs “satura” sadalījumu 3 vienādās kolonnās ar 30 pikseļu atstarpi starp tām. Ja vēlaties divas kolonnas, nevis 3, jūs vienkārši mainīsit šo vērtību, un pārlūkprogramma aprēķinās šo kolonnu jaunos platumus, lai vienmērīgi sadalītu saturu. Ievērojiet, ka mēs vispirms izmantojam piegādātāja prefiksu rekvizītus, kam seko deklarācijas bez prefiksiem.
Lai cik viegli tas būtu, tā lietošana šādā veidā ir apšaubāma vietnes izmantošanai. Jā, jūs varat sadalīt virkni satura vairākās kolonnās, taču tas, iespējams, nav labākais lasījums pieredze tīmeklī, it īpaši, ja šo kolonnu augstums nokrītas zem ekrāns.
Tad lasītājiem būtu jāritina uz augšu un uz leju, lai lasītu visu saturu. Tomēr CSS kolonnu pamats ir tikpat vienkāršs, kā redzat šeit, un to var izmantot daudz vairāk nekā tikai sadalīt dažu punktu saturu - to patiešām var 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 kolonnas. Tas ir ļoti izplatīts vietnes izkārtojums, un, lai sasniegtu šīs 3 kolonnas, jūs parasti peldat sadalījumos, kas atrodas. Izmantojot CSS vairākas kolonnas, tas ir daudz vieglāk.
Šeit ir daži HTML paraugi:
No mūsu emuāra.
Saturs nonāktu šeit ...
Gaidāmie notikumi.
Saturs nonāktu šeit ...
CSS, lai izveidotu šīs vairākas kolonnas, sākas ar iepriekš redzēto:
.content {
-moz-kolonnu skaits: 3;
-webkit-kolonnu skaits: 3;
kolonnu skaits: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
kolonnas atstarpe: 30 pikseļi;
}
Tagad izaicinājums ir tāds, ka pārlūkprogramma vēlas vienmērīgi sadalīt šo saturu, tādēļ, ja šo sadalījumu satura garums ir atšķirīgs, šī pārlūkprogramma faktiski sadalīs individuālu sadalījumu, pievienojot tā sākumu vienai kolonnai un pēc tam turpinot citā (to var redzēt, izmantojot šo kodu, lai veiktu eksperimentu un katrā iekšpusē pievienotu dažāda garuma saturu nodaļa).
Tas nav tas, ko vēlaties. Jūs vēlaties, lai katra no šīm nodaļām izveidotu atsevišķu kolonnu, un neatkarīgi no tā, cik liels vai mazs ir atsevišķa rajona saturs, jūs nekad nevēlaties, lai tas tiktu sadalīts. To var sasniegt, pievienojot šo vienu papildu CSS rindiņu:
.content div {
displejs: inline-block;
}
Tas liks tām sadaļām, kas atrodas “satura” iekšienē, palikt neskartām, pat ja pārlūkprogramma to sadala vairākās kolonnās. Vēl labāk, tā kā mēs šeit neko nedevām ar fiksētu platumu, šīs kolonnas automātiski mainīsies, kad pārlūkprogramma mainīs izmēru, padarot tās par ideālu lietojumprogrammu atsaucīgas vietnes. Ievietojot šo “in-block” stilu, katrs no trim jūsu sadalījumiem būs atsevišķa satura kolonna.
Izmantojot kolonnas platumu
Bez “kolonnu skaita” varat izmantot vēl vienu īpašumu, kuru varat izmantot, un atkarībā no izkārtojuma vajadzībām tā faktiski var būt labāka izvēle jūsu vietnei. Tas ir “kolonnas platums”. Izmantojot to pašu HTML marķējumu, kā parādīts iepriekš, mēs to varētu izdarīt ar mūsu CSS:
.content {
-moz-kolonnas platums: 500 pikseļi;
-webkit-column-width: 500px;
kolonnas platums: 500 pikseļi;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
kolonnas atstarpe: 30 pikseļi;
}
.content div {
displejs: inline-block;
}
Tas darbojas tā, ka pārlūkprogramma šo slejas platumu izmanto kā šīs kolonnas maksimālo vērtību. Tātad, ja pārlūkprogrammas loga platums ir mazāks par 500 pikseļiem, šie 3 sadalījumi parādīsies vienā kolonnā - viens virs otra. Šis ir tipisks izkārtojums, ko izmanto mobilo / mazo ekrānu izkārtojumos.
Tā kā pārlūkprogrammas platums ir pietiekami liels, lai tajā ietilptu 2 kolonnas kopā ar norādītajām kolonnu atstarpēm, pārlūks automātiski pāriet no vienas kolonnas izkārtojuma uz divām kolonnām. Turpiniet palielināt ekrāna platumu, un galu galā jūs saņemsiet 3 kolonnu dizainu, un katrs no mūsu 3 rajoniem tiks parādīts savā kolonnā. Atkal, tas ir lielisks veids, kā iegūt atsaucību, draudzīgs vairākām ierīcēm izkārtojumus, un jums tas pat nav jāizmanto plašsaziņas līdzekļu vaicājumi lai mainītu izkārtojuma stilus!
Citas kolonnas īpašības
Papildus šeit apskatītajām īpašībām ir arī kolonnas noteikuma īpašības, tostarp krāsas, stila un platuma vērtības, kas ļauj izveidot kārtulas starp kolonnām. Tie tiks izmantoti robežu vietā, ja vēlaties, lai kolonnas atdalītu dažas līnijas.
Laiks eksperimentēt
Pašlaik CSS vairāku kolonnu 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 daudz vecākas Internet Explorer versijas, kuras tik un tā vairs netiek atbalstītas.
Tā kā šis atbalsta līmenis ir ieviests, nav pamata nesākt eksperimentēt ar CSS kolonnām un izvietot šos stilus jau gatavām vietnēm. Varat sākt eksperimentus, izmantojot šajā rakstā sniegto HTML un CSS, un spēlēt ar dažādām vērtībām, lai redzētu, kas vislabāk atbilst jūsu vietnes izkārtojuma vajadzībām.