Daugelį metų, CSS plūduriuoja buvo puikus, tačiau būtinas komponentas kuriant svetainės maketus. Jei jūsų dizainas reikalavo kelių stulpelių, pasukote į plūdes. Šio metodo problema yra ta, kad, nepaisant neįtikėtino išradingumo, kurį interneto dizaineriai / kūrėjai parodė kurdami sudėtingą svetainę maketai, CSS plūdės niekada nebuvo skirtos naudoti tokiu būdu.
Nors plūdės ir CSS padėties nustatymas tikrai turės vietą interneto dizainui daugelį metų, naujesnis išdėstymas metodai, įskaitant CSS tinklelį ir „Flexbox“, dabar suteikia interneto dizaineriams naujų būdų kurti savo svetainių maketus. Dar viena nauja potencialo parodymo išdėstymo technika yra CSS keli stulpeliai.
CSS stulpeliai egzistuoja jau keletą metų, tačiau trūksta palaikymo senesnėse (daugiausia senesnėse) naršyklėse „Internet Explorer“ versijos) daugeliui žiniatinklio profesionalų neleido naudoti šių stilių savo gamyboje darbas.
Pasibaigus senesnių IE versijų palaikymui, kai kurie interneto dizaineriai dabar eksperimentuoja su nauju CSS išdėstymu parinktys, įtraukti CSS stulpeliai ir nustatymas, kad jie turi daug daugiau galimybių valdyti šiuos naujus metodus nei su jais plūduriuoja.
CSS stulpelių pagrindai
Kaip rodo jo pavadinimas, CSS keli stulpeliai (taip pat žinomi kaip CSS3 kelių stulpelių išdėstymas) leidžia padalyti turinį į nustatytą stulpelių skaičių. Pagrindinės CSS ypatybės, kurias naudotumėte, yra šios:
- stulpelių skaičius
- stulpelio tarpas
Stulpelių skaičiavimui nurodote norimų stulpelių skaičių. Stulpelio tarpas būtų latakai arba tarpai tarp tų kolonų. Naršyklė atsižvelgs į šias reikšmes ir tolygiai padalins turinį į nurodytą stulpelių skaičių.
Praktikoje įprastas CSS kelių stulpelių pavyzdys būtų teksto turinio bloko padalijimas į kelis stulpelius, panašiai kaip matytumėte laikraščio straipsnyje. Tarkime, kad turite šį HTML žymėjimą (atkreipkite dėmesį, kad, pavyzdžiui, mes įdėjome tik pradžia viena pastraipa, nors praktiškai šiame žymėjime gali būti kelios turinio pastraipos):
Jūsų straipsnio antraštė.
Įsivaizduokite daugybę teksto pastraipų ...
Jei tada parašėte šiuos CSS stilius:
.turinys {
-moz-column-count: 3;
-webkit-column-count: 3;
stulpelių skaičius: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
stulpelio tarpas: 30 taškų;
}
Ši CSS taisyklė padalins „turinio“ padalijimą į 3 vienodus stulpelius, tarp kurių yra 30 taškų tarpas. Jei norėtumėte dviejų stulpelių, o ne 3, paprasčiausiai pakeistumėte šią vertę ir naršyklė apskaičiuotų naujus tų stulpelių pločius, kad turinys būtų tolygiai padalytas. Atkreipkite dėmesį, kad pirmiausia mes naudojame pardavėjo priešdėlines ypatybes, o po to - nepriimtas deklaracijas.
Kad ir kaip lengva, jo naudojimas tokiu būdu yra abejotinas naudojant svetainę. Taip, galite padalyti daugybę turinio į kelis stulpelius, tačiau tai gali būti ne pats geriausias skaitinys patirtis žiniatinklyje, ypač jei šių stulpelių aukštis nukrenta žemiau ekranas.
Tada skaitytojai turėtų slinkti aukštyn ir žemyn, kad galėtų perskaityti visą turinį. Vis dėlto pagrindinis CSS stulpelių principas yra toks pat lengvas, kaip matote čia, ir jis gali būti naudojamas kur kas daugiau nei tik padalinti kai kurių pastraipų turinį - jį iš tiesų galima naudoti maketuojant.
Išdėstymas su CSS stulpeliais
Tarkime, kad turite tinklalapį su turinio sritimi, kurioje yra 3 turinio stulpeliai. Tai yra labai įprastas svetainės išdėstymas, ir norint pasiekti tuos 3 stulpelius, paprastai plūduriuosite esančiuose skyriuose. Naudojant CSS kelis stulpelius, tai yra daug lengviau.
Štai keletas HTML pavyzdžių:
Iš mūsų tinklaraščio.
Turinys pateks čia ...
Artimiausi renginiai.
Turinys pateks čia ...
Šiems keliems stulpeliams sukurti CSS prasideda nuo to, ką matėte anksčiau:
.turinys {
-moz-column-count: 3;
-webkit-column-count: 3;
stulpelių skaičius: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
stulpelio tarpas: 30 taškų;
}
Dabar iššūkis yra tas, kad naršyklė nori padalinti šį turinį tolygiai, taigi, jei skiriasi šių padalinių turinio ilgis, ta naršyklė iš tikrųjų padalins atskiras padalijimas, pridedant jo pradžią į vieną stulpelį, o tada tęsiant į kitą (tai galite pamatyti naudodami šį kodą eksperimentui atlikti ir kiekviename kiekviename pridėti skirtingo ilgio turinį padalijimas).
Tai nėra tai, ko norite. Norite, kad kiekvienas iš šių padalinių sukurtų atskirą stulpelį ir, kad ir koks didelis ar mažas būtų atskiro skyriaus turinys, niekada nenorite, kad jis būtų padalytas. Tai galite pasiekti pridėdami šią papildomą CSS eilutę:
.content div {
ekranas: inline-block;
}
Tai privers tuos „turinio“ viduje esančius padalijimus likti nepažeistus, net kai naršyklė padalija į kelis stulpelius. Dar geriau, nes mes nieko čia nepateikėme fiksuoto pločio, šie stulpeliai bus automatiškai keičiami naršyklei keičiant dydį, todėl jie bus ideali programa reaguojančios svetainės. Naudojant tą „inline-block“ stilių, kiekvienas iš trijų padalinių bus atskiras turinio stulpelis.
Naudojant stulpelio plotį
Be „stulpelių skaičiavimo“ galite naudoti ir kitą nuosavybę, kuri, atsižvelgiant į jūsų išdėstymo poreikius, gali būti tinkamesnis pasirinkimas jūsų svetainei. Tai yra „stulpelio plotis“. Naudodami tą patį HTML žymėjimą, kaip parodyta anksčiau, galime tai padaryti naudodami savo CSS:
.turinys {
-moz-column-width: 500px;
-webkit-column-width: 500px;
stulpelio plotis: 500 taškų;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
stulpelio tarpas: 30 taškų;
}
.content div {
ekranas: inline-block;
}
Tai veikia taip, kad naršyklė naudoja šį „stulpelio plotį“ kaip didžiausią to stulpelio vertę. Taigi, jei naršyklės langas yra mažesnis nei 500 taškų pločio, šie 3 skyriai pasirodys viename stulpelyje, vienas ant kito. Tai tipiškas maketas, naudojamas mobiliesiems / mažiems ekranams išdėstyti.
Kai naršyklės plotis yra pakankamai didelis, kad tilptų 2 stulpeliai kartu su nurodytomis stulpelių spragomis, naršyklė automatiškai pereis nuo vieno stulpelio išdėstymo prie dviejų stulpelių. Toliau didinkite ekrano plotį ir galiausiai gausite 3 stulpelių dizainą, o kiekvienas iš mūsų 3 skyrių bus rodomas savo stulpelyje. Vėlgi, tai puikus būdas reaguoti, draugiškas keliems įrenginiams maketus, ir jums net nereikia jų naudoti žiniasklaidos užklausos pakeisti maketo stilius!
Kitos stulpelio ypatybės
Be čia aprašytų ypatybių, taip pat yra „stulpelio taisyklės“ ypatybių, įskaitant spalvos, stiliaus ir pločio vertes, leidžiančias kurti taisykles tarp stulpelių. Jie būtų naudojami vietoj kraštinių, jei norite, kad stulpelius atskirtų kelios eilutės.
Laikas eksperimentuoti
Šiuo metu CSS kelių stulpelių išdėstymas yra labai gerai palaikomas. Naudojant priešdėlius, daugiau nei 94% žiniatinklio naudotojų galėtų pamatyti šiuos stilius, o ta nepalaikoma grupė iš tikrųjų būtų tik daug senesnės „Internet Explorer“ versijos, kurios ir taip nebepalaikomos.
Esant tokiam palaikymo lygiui, nėra jokios priežasties nepradėti eksperimentuoti su CSS stulpeliais ir diegti šiuos stilius jau paruoštose svetainėse. Galite pradėti eksperimentus naudodami šiame straipsnyje pateiktą HTML ir CSS ir žaisti su skirtingomis vertėmis, kad sužinotumėte, kas geriausiai atitiktų jūsų svetainės išdėstymo poreikius.