CSS kelių stulpelių išdėstymo modulis yra galingas įrankis, leidžiantis lengvai sukurti kelių stulpelių išdėstymą savo tinklalapiams. Reaktyvaus dizaino atsiradimas reiškia, kad svarbu suprasti, kaip naudoti šį modulį.
Galite naudoti stulpelių ypatybes, kad sukurtumėte lanksčius ir dinamiškus maketus, prisitaikančius prie skirtingų ekrano dydžių.
Nurodykite stulpelio numerį, plotį ir tarpą
Norėdami sukurti tinkamą kelių stulpelių išdėstymą savo puslapio turiniui, pirmiausia turėtumėte nuspręsti, kiek stulpelių norite apimti. Viena iš svarbiausių kelių stulpelių modulio savybių yra stulpelių skaičius ypatybę, kurią naudojate norėdami nustatyti stulpelių, į kuriuos padalyti turinį, skaičių.
Pavyzdžiui:
.konteineris {
stulpelių skaičius: 3;
}
Taip pat galite nurodyti stulpelių plotį ir tarpą. Stulpelio pločio reikšmę galite nustatyti naudodami bet kurį iš palaikomi CSS vienetai Kaip px, em, arba %.
Jeigu stulpelio pločio yra nustatytas automatinis, naršyklė apskaičiuos kiekvieno stulpelio plotį pagal stulpelių skaičius turtą ir laisvą erdvę jūsų išdėstyme.
Pavyzdžiui, šis CSS deklaruoja 3 stulpeliai, kurių kiekvieno plotis 200 pikseliai:
.konteineris {
stulpelių skaičius: 3;
stulpelio pločio: 200px;
}
The stulpelis-tarpelis ypatybė nurodo tarpą arba tarpą tarp stulpelių kelių stulpelių išdėstyme. Jis nustatys tuščių tarpų tarp gretimų stulpelių dydį ir ilgio reikšmę pikseliais, ems arba kitais palaikomais vienetais.
Pavyzdžiui:
.konteineris {
stulpelių skaičius: 3;
stulpelis-tarpelis: 20px; /* nustato tarpą tarp stulpelių iki 20 pikselių */
}
Pagal numatytuosius nustatymus reikšmė stulpelis-tarpelis yra nustatytas normalus. Jūsų naršyklė pasirenka šią reikšmę, kad išdėstyme būtų nuoseklūs tarpai tarp stulpelių ir išliktų vizualiai malonūs. Ši reikšmė taip pat gali skirtis įvairiose naršyklėse ir taip pat gali priklausyti nuo šrifto dydžio, eilutės aukščio, padėties nuosavybė, ir kitas stulpelių turinio išdėstymo savybes.
Užtikrinkite stulpelių pusiausvyrą
CSS stulpeliai bando užpildyti visą turimą vietą makete. Dėl to kartais gali atsirasti stulpelių, kurių aukštis labai skiriasi, todėl išdėstymas atrodo netolygus.
Norėdami subalansuoti stulpelius, įsitikinkite, kad kiekviename išdėstymo stulpelyje yra maždaug tiek pat turinio.
Tai galite pasiekti nustatę CSS stulpelio užpildymas nuosavybė į pusiausvyrą. Tada naršyklė bandys tolygiai paskirstyti turinį visuose stulpeliuose, kad jie būtų maždaug tokio paties aukščio.
The stulpelio užpildymas nuosavybė nustatyta pusiausvyrą pagal numatytuosius nustatymus, bet vertė automatinis pakeis šį elgesį. Naudojant automatinį turinį, turinys paskirstomas stulpeliuose pagal laisvą vietą. Dėl to gali atsirasti netolygus atstumas tarp stulpelių ir netolygus stulpelių aukštis. Jis netgi gali sukurti maketą su tuščiais stulpeliais.
Štai pavyzdys, kaip naudoti stulpelio užpildymas ypatybė, skirta subalansuoti stulpelius kelių stulpelių išdėstyme:
.kelių stulpelių išdėstymas {
stulpelių skaičius: 3;
stulpelis-tarpelis: 20px;
stulpelio užpildymas: pusiausvyrą;
}
Šiame pavyzdyje turime kelių stulpelių išdėstymą su trimis stulpeliais ir 20 pikselių tarpu tarp kiekvieno stulpelio. Nustatydami stulpelio užpildymas nuosavybė į pusiausvyrą, užtikriname, kad turinys tolygiai pasiskirstytų stulpeliuose, todėl stulpelių aukščiai subalansuoti.
Svarbu pažymėti, kad stulpelio užpildymas ypatybė gali neveikti visuose maketuose ir dėl to tarp stulpelių gali atsirasti netolygus atstumas. Tokiais atvejais gali reikėti naudoti JavaScript, kad rankiniu būdu subalansuotumėte stulpelius. Nepamirškite laikytis geriausios praktikos ir naudoti laipsnišką tobulinimą kad nepasikliaukite JavaScript.
Viską sudėjus
Galite sujungti viską, ką sužinojote apie maketo įgyvendinimą su CSS stulpeliais ir naudoti jį kurdami žurnalo stiliaus maketą.
Pirmiausia sukurkite pagrindinę HTML struktūrą. Naudokite konteinerio elementą, kad apvyniotumėte turinį, tada sukurkite kelis antrinius elementus, kuriuos galėsite išdėstyti stulpeliuose.
html>
<html>
<galva>
<nuorodarel="stiliaus lapas"href=„CSScolumns.css“ />
galva>
<kūnas>
Konteinerio elementas
<divklasė="žurnalo maketas">Vaikų elementai
<divklasė="straipsnis">
<h2>Straipsnio pavadinimash2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Įtraukta
magna vel lorem pharetra bibendum.p>
div><divklasė="straipsnis">
<h2>Straipsnio pavadinimash2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Įtraukta
magna vel lorem pharetra bibendum.p>
div><divklasė="straipsnis">
<h2>Straipsnio pavadinimash2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Įtraukta
magna vel lorem pharetra bibendum.p>
div>
div>
kūnas>
html>
Norėdami sukurti žurnalo stiliaus maketą naudodami CSS kelių stulpelių modulį, sujunkite stulpelių skaičius, stulpelio pločio, stulpelis-tarpelis, ir stulpelio užpildymas savybės:
.žurnalas-išdėstymas {
stulpelių skaičius: 3;
stulpelio pločio: 300px;
stulpelis-tarpelis: 20px;
stulpelio užpildymas: pusiausvyrą;
}
.straipsnis {
fono spalva: #f8f8f8;
pasienio spindulys: 4px;
dėžutė-šešėlis: 0 2px 4pxrgba(0, 0, 0, 0.1);
kamšalas: 10px;
įsilaužti į vidų: išvengti-stulpelis;
}
Šis pavyzdys taip pat apibrėžia įsilaužti į vidų turtas ant .straipsnis klasė, kurios vertė yra išvengti-stulpelis. Savybė užtikrina, kad kiekvienas straipsnis liktų viename stulpelyje, o ne skaidomas į kelis stulpelius. Štai kaip turėtų atrodyti išdėstymas:
Atsarginių variantų naudojimas nepalaikomoms naršyklėms
Svarbu pažymėti, kad stulpelių skaičius nuosavybė palaikoma ne visose naršyklėse. Naršyklės, kurios nepalaiko stulpelių skaičius, turinys bus rodomas viename stulpelyje.
Norėdami pateikti atsarginius stilius nepalaikomoms naršyklėms, galite naudoti funkcijų užklausas, pvz., @palaiko aptikti palaikymą stulpelių skaičius nuosavybė ir pateikti alternatyvius stilius, kai nuosavybė nepalaikoma.
Pavyzdžiui:
.konteineris {
/* Atsarginis variantas naršyklėms, kurios nepalaiko stulpelių skaičiaus */
plotis: 100%;
}
/* Aptikti stulpelių skaičiaus palaikymą */
@palaiko (stulpelių skaičius:3) {
.konteineris {
stulpelių skaičius: 3;
}
}
Šiame pavyzdyje mes naudojame @palaiko funkcijos užklausa, skirta aptikti palaikymą stulpelių skaičius nuosavybė. Jei naršyklė palaiko stulpelių skaičių, konteineris elementas bus rodomas trijuose stulpeliuose. Jei naršyklė nepalaiko stulpelių skaičiavimo, ji parodys turinį viename stulpelyje, naudodama plotis nuosavybė.
Turinio suskaidymas į stulpelius
Apskritai, CSS stulpeliai yra praktiškas ir efektyvus būdas sukurti lanksčius ir reaguojančius kelių stulpelių išdėstymus, kurie pagerina žiniatinklio turinio naudojimą ir vartotojo patirtį.
Kartu naudodami CSS stulpelius ir „JavaScript“, galite sukurti dar sudėtingesnius ir dinamiškesnius maketus, kurie prisitaikys pritaikyti įvairioms naudotojų nuostatoms ir įrenginių dydžiams, todėl jūsų žiniatinklio turinys tampa prieinamesnis ir patrauklesnis naudotojams.
