Kelių stulpelių išdėstymas (panašus į žurnalą) Su CSS3
Apskritai, žmonės neteks trasos, kai skaito labai ilgą turinį. Štai kodėl spaudoje, pvz., Žurnaluose ir laikraščiuose, turinys yra suskirstytas į keletą stulpelių, kad būtų lengviau skaityti.
Stulpelio kūrimas internete yra visiškai kitokia istorija. Tai gana sunku. Iš tikrųjų, ne per seniai jums gali tekti rankiniu būdu padalyti turinį į kai kuriuos divs ir plaukite jį į dešinę arba į kairę, tada nurodykite plotį, pamušalą, paraštę, ribas ir pan.
Tačiau dabar dalykai yra daug supaprastinti CSS3 kelių stulpelių modulis. Kaip aiškiai nurodo pavadinimas, šis modulis leidžia mums padalinti turinį į stulpelius, kuriuos matome laikraščiuose ar žurnaluose.
Naršyklės palaikymas
Šiuo metu visose naršyklėse yra palaikomos kelios stulpeliai - „Firefox 2+“, „Chrome 4+“, „Safari 3.1+“ ir „Opera 11.1“, išskyrus, kaip prognozuojama, „Internet Explorer“, tačiau kita versija, IE10, pradėjo teikti paramą šiam moduliui.
Kitoms naršyklėms, kad ji veiktų, „Firefox“ vis dar turi -moz- „Chrome“ ir „Safari“ reikia -žiniatinklio rinkinys- priešdėlis. „Opera“ nereikalauja jokių priešdėlių, todėl galime naudoti tik oficialiąsias savybes.
Šaltinis: Kada galiu naudoti „CSS3 Multiple column“ išdėstymą?
Sukurti kelias stulpelius
Prieš kurdami stulpelius, paruošėme keletą teksto pastraipų demonstravimui, suvyniotas į HTML5 žyma, kaip nurodyta toliau;
„Lorem ipsum dolor sit amet, consectetur elit“. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Nepamirškite laiko. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. //ir taip toliau
… Ir nurodykite plotį 600px nuo stiliaus lapo.
Dabar pradėkime kurti stulpelius.
Toliau pateiktame pavyzdyje turinį padalinsime į du stulpelius su stulpelių skaičius nuosavybė. Ši ypatybė parodys naršyklei, kad jis pateiktų turinį į stulpelius pagal nurodytą skaičių ir leiskite naršyklei nuspręsti, kokio dydžio stulpelis yra tinkamas.
straipsnis -webkit-column-count: 2; -moz-column-count: 2; stulpelių skaičius: 2;
Be to, kad juos apibrėžia skaičiai, stulpelius galima sukurti, nurodant plotį naudojant stulpelio plotis palikdami naršyklę nuspręsti, kiek stulpelių turėtų būti sukurta.
Šiame pavyzdyje nurodome stulpelio plotį 150px, dėl to turinys buvo suskirstytas į tris stulpelius.
straipsnis -moz-column-width: 150px; -webkit-stulpelio plotis: 150px; stulpelio plotis: 150px;
Kaip nurodyta specifikacijoje. faktinis stulpelio plotis gali būti platesnis arba siauresnis už nurodytą stulpelio plotį, priklausomai nuo laisvos vietos. Be to, jei nėra aiškiai nurodyta pločio vertė, “automatinis” bus laikomas numatytuoju, kuris taip pat gali reikšti “stulpelio nėra”.
Stulpelio tarpas
Stulpelio tarpas apibrėžti erdves, atskiriančias kiekvieną stulpelį. Tarpo vertė gali būti nurodyta em arba px, bet kaip nurodyta specifikacijoje vertė negali būti neigiama. Toliau pateiktame pavyzdyje nurodome spragą 30px, taigi erdvės tarp stulpelių atrodo šiek tiek platesnės.
straipsnis -webkit-column-gap: 30px; -moz-stulpelio tarpas: 30px; stulpelio tarpas: 30px;
Stulpelio taisyklė
Jei norite įterpti sienas tarp stulpelio, galite naudoti stulpelio taisyklė nuosavybė, kuri veikia labai panašiai sienos nuosavybė. Taigi, tarkime, jei norime įterpti taškinę sieną tarp stulpelio, galime rašyti;
straipsnis -moz-column-rule: 1px punktyras #ccc; -webkit-column-rule: 1px punktyras #ccc; stulpelio taisyklė: 1px punktyras #ccc;
Stulpelio span
Ši savybė veikia gana panašiai kaip colspan į lentelė žyma. Bendras šios ypatybės įgyvendinimas yra turinio antraštės visuose stulpeliuose apimtis. Čia yra pavyzdys.
straipsnis h1 -webkit-column-span: all; stulpelis: visi;
Pirmiau pateiktame pavyzdyje mes apibrėžėme h1 span visuose stulpeliuose, ir jei yra nurodytas stulpelio spindulys, 1 bus laikomas numatytuoju. Deja, ši savybė šio rašymo metu veikia tik „Opera“ ir „Chrome“.
Galutiniai žodžiai
Tai viskas dabar, mes pasiekėme visus svarbiausius dalykus, kad sukurtume kelis stulpelius su CSS3, ir kaip jau minėjome pradžioje, šis modulis puikiai veikia šiuolaikinėse naršyklėse, tačiau dar neveikia „Internet Explorer“.
Galų gale, tikimės, kad dabar turite pakankamai gerą supratimą apie tai, kaip sukurti stulpelius su CSS3, ir jei turite laiko eksperimentams, pasidalinkite savo metodais ir rezultatais toliau pateiktame komentarų laukelyje. Dėkojame, kad skaitote šį įrašą ir smagiai.
- Demo
- Atsisiųsti šaltinį
