Daugelį metų "CSS" plūdės buvo puikus, tačiau būtinas komponentas kuriant svetainių išdėstymą. Jei jūsų projektas paskatino kelis stulpelius, jūs sukūrėte plūdes . Problema su šiuo metodu yra ta, kad, nepaisant neįtikėtinai išradingumo, kurį kūrėjai ir dizaineriai parodė kurdami sudėtingus svetainių išdėstymus, "CSS" plūdės niekada nebuvo naudojamos tokiu būdu.
Nors nauji maketavimo būdai, įskaitant "CSS Grid" ir "Flexbox", neabejotinai turi svetainės dizainą daugybėje ateityje plūdžių ir CSS pozicionavimo, dabar interneto dizaineriai suteikia naujų būdų kurti svetainių išdėstymą. Kitas naujas išdėstymo būdas, kuris rodo daug potencialo, yra CSS kelis stulpelius.
CSS stulpeliai jau buvo maždaug keletą metų, tačiau senų naršyklių (daugiausia senesnių "Internet Explorer" versijų) palaikymo stoka daugelis žiniatinklio profesionalų išleido tokius stilius savo gamybiniame darbe.
Pasibaigus palaikymui toms senesnėms IE versijoms, kai kurie interneto dizaineriai dabar eksperimentuoja su naujais CSS išdėstymo parinktimis, įtrauktais CSS stulpeliais, ir nustato, kad jie turi daug daugiau kontrolės su šiais naujais metodais, nei jie padarė su plūdelėmis.
CSS stulpelių pagrindai
Kaip rodo jo pavadinimas, "CSS Multiple Columns" (taip pat žinomas kaip CSS3 daugkartiniai išdėstymai), galite suskaidyti turinį į tam tikrą skaičių stulpelių. Pagrindinės CSS savybės, kurias turėtumėte naudoti:
- stulpelių skaičius
- stulpelio spraga
Jei norite nurodyti stulpelių skaičių, nurodykite pageidaujamų stulpelių skaičių. Skilties atotrūkis būtų latakai arba tarpai tarp šių stulpelių. Naršyklė atsižvelgs į šias vertes ir padalins turinį tolygiai į nurodytas stulpelių skaičių.
Paprastai CSS kelių stulpelių pavyzdžiu būtų padalyti teksto turinio bloką į kelis stulpelius, panašius į tuos, kuriuos matysite laikraščio straipsnyje. Pasakykite, kad turite tokį HTML žymėjimą (atkreipkite dėmesį į tai, kad, pavyzdžiui, aš pradėjau tik vieną pastraipą, o praktikoje šiame žymėjime gali būti keli turinio punktai):
Jūsų straipsnio pavadinimas
Įsivaizduokite daug teksto pastraipų ...
Jei tu tada parašei šiuos CSS stilius:
.Content {-moz-column-count: 3; -webkit-column-count: 3; stulpelių skaičius: 3; -moz-stulpelio spraga: 30 px; -webkit-column-gap: 30 px; stulpelio spraga: 30 px; }Ši CSS taisyklė padalintų "turinio" padalijimą į 3 lygias stulpelius, tarp jų - 30 pikselių. Jei norite, kad būtų du stulpeliai, o ne 3, jūs tiesiog pakeisite tą vertę, o naršyklė apskaičiuos naujus šių stulpelių pločius, kad būtų galima vienodai suskaidyti turinį. Atkreipkite dėmesį, kad mes pirmiausia naudosime iš anksto pateiktus gamintojo savybes, o po to - be prefiksuotos deklaracijos.
Taip paprasta, kaip tai yra, jo naudojimas tokiu būdu kelia abejonių dėl svetainės naudojimo. Taip, galite suskaidyti daugybę turinio į kelis stulpelius, tačiau tai gali būti ne geriausias žiniatinklio skaitymo būdas, ypač jei šių stulpelių aukštis yra žemiau ekrano "ekrano".
Tada skaitytojai turės slinkti aukštyn ir žemyn, norėdami perskaityti visą turinį. Vis dėlto CSS stulpelių principas yra toks pat lengvas, kaip matote čia, ir jį galima naudoti daug daugiau nei dalijant tam tikrų dalių turinį, jis iš tiesų gali būti naudojamas išdėstymui.
Maketas su CSS stulpeliais
Pasakykite, kad turite tinklalapį su turinio sritimi, kurioje yra 3 turinio stulpeliai. Tai labai įprastas svetainės išdėstymas, ir norint pasiekti tuos 3 stulpelius, paprastai įplaukite skyrių, kuriame esate. CSS sudėtiniuose stulpeliuose tai yra daug lengviau.
Štai keletas HTML pavyzdžių:
Naujausios naujienos
Turinys būtų čia ...
Iš mūsų dienoraščio
Turinys būtų čia ...
Būsimi įvykiai
p>
CSS, kad šie daugkartiniai stulpeliai prasidėtų tuo, ką anksčiau matėte.
.Content {-moz-column-count: 3; -webkit-column-count: 3; stulpelių skaičius: 3; -moz-stulpelio spraga: 30 px; -webkit-column-gap: 30 px; stulpelio spraga: 30 px; }Dabar iššūkis yra tas, kad, nes naršyklė nori padalinti šį turinį tolygiai, taigi, jei šių padalinių turinio ilgis yra kitoks, ši naršyklė iš tikrųjų padalins atskirų padalinių turinį, pridedant jo pradžią į vieną stulpelį ir tada tęsdami į kitą (pamatysite tai naudodami šį kodą, norėdami paleisti eksperimentą ir pridėti skirtingus turinio kiekius kiekviename skyriuje)!
Tai nėra tai, ko norite. Norite, kad kiekvienas iš šių skyrių sukurtų atskirą skiltį ir, nepriklausomai nuo to, kiek didelis ar mažas yra atskiras skyrių turinys, jūs niekada nenorite, kad ji būtų padalyta. Tai galite pasiekti pridedant šią vieną papildomą CSS eilutę:
.Content div {display: inline-block; }Tai priverčia tuos padalinius, kurie yra "turinio" viduje, likti nepakitę netgi tada, kai naršyklė ją padaro į kelis stulpelius. Dar geriau, nes čia nieko nenurodome fiksuoto pločio, šie stulpeliai automatiškai keičiasi, kai naršyklės dydis keičiasi, todėl jie yra ideali programa jautrioms svetainėms . Su tuo "inline-block" stiliumi vietoje, kiekvienas iš jūsų 3 skyrių bus atskiras turinio skiltis.
"Column-Width" naudojimas
Be "stulpelių skaičiaus", kurį galite naudoti, yra ir kitas turtas, kuris, priklausomai nuo jūsų išdėstymo poreikių, gali būti geresnis jūsų svetainės pasirinkimas. Tai yra "stulpelio plotis". Naudodami tą patį HTML žymėjimą, kaip parodyta anksčiau, vietoj to mes galėtume tai padaryti naudodami mūsų CSS:
.Content {-moz-column-width: 500px; -webkit-column-width: 500px; stulpelio plotis: 500 px; -moz-stulpelio spraga: 30 px; -webkit-column-gap: 30 px; stulpelio spraga: 30 px; } .content div {display: inline-block; }Tai, kaip tai veikia, yra tai, kad naršyklė naudoja šį "stulpelio pločio" kaip didžiausią šio stulpelio reikšmę. Taigi, jei naršyklės langas yra mažesnis nei 500 pikselių pločio, šie trys skyriai rodomi viename stulpelyje, viename iš kitų viršūnių. Tai tipiškas išdėstymas, naudojamas mobiliesiems / mažiems ekranams.
Kadangi naršyklės plotis tampa pakankamai didelis, kad tilptų į 2 stulpelius kartu su nurodytomis stulpelio spragas, naršyklė automatiškai pereis iš vieno stulpelio išdėstymo į du stulpelius. Padidinkite ekrano plotį ir, galų gale, gausite 3 skilties dizainą, kiekvienas iš mūsų 3 skyrių bus rodomas savo stulpelyje. Vėlgi, tai yra puikus būdas gauti reaguojančius, daugiafunkcinius įrenginius , ir net nereikia naudoti žiniasklaidos užklausų, kad pakeistumėte išdėstymo stilių!
Kiti stulpelio ypatybės
Be čia aprašytų savybių, taip pat yra savybių "stulpelių taisyklė", įskaitant spalvų, stilių ir pločio reikšmes, kurios leidžia jums sukurti tarp jūsų stulpelių taisykles. Jie bus naudojami vietoj sienų, jei norite turėti kelias linijas, atskiriančias stulpelius.
Laikas eksperimentuoti
Šiuo metu CSS kelių stulpelių išdėstymas yra labai gerai palaikomas. Naudojant prefiksus, daugiau kaip 94% interneto vartotojų galės pamatyti šiuos stilius ir kad nepalaikoma grupė tikrai būtų daug senesnių "Internet Explorer" versijų, kurios bet kuriuo atveju gali būti nepalaikomos.
Su šiuo šiuo metu galiojančia parama, nėra pagrindo ne pradėti eksperimentuoti su CSS stulpeliais ir diegti šiuos stilius gamyboje parengtose svetainėse. Galite pradėti savo eksperimentus naudodami HTML ir CSS, pateiktus šiame straipsnyje, ir žaisti su skirtingomis vertybėmis, kad galėtumėte pamatyti, kas geriausiai tinka jūsų svetainės išdėstymo poreikiams.