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