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):
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:
