CSS vairāku kolonnu izkārtojuma modulis ir spēcīgs rīks, kas ļauj ērti izveidot vairāku kolonnu izkārtojumus savām tīmekļa lapām. Adaptīvā dizaina attīstība nozīmē, ka ir svarīgi saprast, kā lietot šo moduli.
Varat izmantot kolonnu rekvizītus, lai izveidotu elastīgus un dinamiskus izkārtojumus, kas pielāgojas dažādiem ekrāna izmēriem.
Kolonnas numura, platuma un spraugas norādīšana
Lai izveidotu atbilstošu vairāku kolonnu izkārtojumu savas lapas saturam, vispirms ir jāizlemj, cik kolonnu vēlaties aptvert. Viena no svarīgākajām vairāku kolonnu moduļa īpašībām ir kolonnu skaits rekvizītu, kuru izmantojat, lai iestatītu kolonnu skaitu, kurās sadalīt saturu.
Piemēram:
.konteiners {
kolonnu skaits: 3;
}
Varat arī norādīt kolonnu platumu un atstarpi. Kolonnas platuma vērtību var iestatīt, izmantojot jebkuru no atbalstītās CSS vienības patīk px, em, vai %.
Ja kolonnas platums ir iestatīts uz auto, pārlūkprogramma aprēķinās katras kolonnas platumu, pamatojoties uz kolonnu skaits īpašumu un pieejamo vietu jūsu izkārtojumā.
Piemēram, šis CSS deklarē 3 kolonnas, katra ar platumu 200 pikseļi:
.konteiners {
kolonnu skaits: 3;
kolonnas platums: 200px;
}
The kolonna-sprauga rekvizīts norāda atstarpi vai atstarpi starp kolonnām vairāku kolonnu izkārtojumā. Tas iestatīs tukšo tukšo vietu lielumu starp blakus esošajām kolonnām un var iegūt garuma vērtību pikseļos, ems vai citās atbalstītās vienībās.
Piemēram:
.konteiners {
kolonnu skaits: 3;
kolonna-sprauga: 20px; /* iestata atstarpi starp kolonnām līdz 20 pikseļiem */
}
Pēc noklusējuma vērtība kolonna-sprauga ir iestatīts uz normāli. Jūsu pārlūkprogramma izvēlas šo vērtību, lai nodrošinātu konsekventu atstarpi starp kolonnām jūsu izkārtojumā, vienlaikus saglabājot vizuāli patīkamu. Šī vērtība dažādās pārlūkprogrammās var atšķirties un var būt atkarīga arī no fonta lieluma, rindiņas augstuma, pozīcijas īpašums, un citas kolonnu satura izkārtojuma īpašības.
Kolonnu līdzsvara nodrošināšana
CSS kolonnas mēģina aizpildīt visu pieejamo vietu izkārtojumā. Tā rezultātā dažkārt var izveidoties kolonnas ar ievērojami atšķirīgu augstumu, padarot izkārtojumu nevienmērīgu.
Lai līdzsvarotu kolonnas, pārliecinieties, vai katrā izkārtojuma kolonnā ir aptuveni vienāds satura apjoms.
To var panākt, iestatot CSS kolonnu aizpildīšana īpašumu uz līdzsvaru. Pēc tam pārlūkprogramma mēģinās vienmērīgi sadalīt saturu visās kolonnās, lai tās būtu aptuveni vienāda augstuma.
The kolonnu aizpildīšana rekvizīts ir iestatīts uz līdzsvaru pēc noklusējuma, bet vērtība auto mainīs šo uzvedību. Izmantojot automātisko, saturs tiek sadalīts pa kolonnām, pamatojoties uz pieejamo vietu. Tas var radīt nevienmērīgu atstatumu starp kolonnām un nevienmērīgu kolonnu augstumu. Tas pat var izveidot izkārtojumu ar tukšām kolonnām.
Šeit ir piemērs, kā izmantot kolonnu aizpildīšana rekvizīts, lai līdzsvarotu kolonnas vairāku kolonnu izkārtojumā:
.vairāku kolonnu izkārtojums {
kolonnu skaits: 3;
kolonna-sprauga: 20px;
kolonnu aizpildīšana: līdzsvaru;
}
Šajā piemērā mums ir vairāku kolonnu izkārtojums ar trim kolonnām un 20 pikseļu atstarpi starp katru kolonnu. Iestatot kolonnu aizpildīšana īpašumu uz līdzsvaru, mēs nodrošinām, lai saturs vienmērīgi sadalītos pa kolonnām, tādējādi nodrošinot līdzsvarotu kolonnu augstumu.
Ir svarīgi atzīmēt, ka kolonnu aizpildīšana rekvizīts var nedarboties labi visiem izkārtojumiem un var radīt nevienmērīgu atstarpi starp kolonnām. Šādos gadījumos jums, iespējams, būs jāizmanto JavaScript, lai manuāli līdzsvarotu kolonnas. Atcerieties ievērot labāko praksi un izmantojiet progresīvu uzlabošanu lai jūs nepaļautos uz JavaScript.
Saliekot to visu kopā
Varat apkopot visu, ko esat iemācījies par izkārtojuma ieviešanu, izmantojot CSS kolonnas, un izmantot to, lai izveidotu žurnāla stila izkārtojumu.
Vispirms izveidojiet pamata HTML struktūru. Izmantojiet konteinera elementu, lai aplauztu saturu, pēc tam izveidojiet vairākus pakārtotos elementus, kurus pēc tam varat izkārtot kolonnās.
html>
<html>
<galvu>
<saiterel="stila lapa"href="CSScolumns.css" />
galvu>
<ķermeni>
Konteinera elements
<divklasē="žurnāla izkārtojums">Bērna elementi
<divklasē="raksts">
<h2>Raksta nosaukumsh2><lpp>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ievadīts
magna vel lorem pharetra bibendum.lpp>
div><divklasē="raksts">
<h2>Raksta nosaukumsh2><lpp>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ievadīts
magna vel lorem pharetra bibendum.lpp>
div><divklasē="raksts">
<h2>Raksta nosaukumsh2><lpp>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ievadīts
magna vel lorem pharetra bibendum.lpp>
div>
div>
ķermeni>
html>
Lai izveidotu žurnāla stila izkārtojumu, izmantojot CSS vairāku kolonnu moduli, apvienojiet kolonnu skaits, kolonnas platums, kolonna-sprauga, un kolonnu aizpildīšana īpašības:
.magazine-layout {
kolonnu skaits: 3;
kolonnas platums: 300px;
kolonna-sprauga: 20px;
kolonnu aizpildīšana: līdzsvaru;
}
.raksts {
fona krāsa: #f8f8f8;
robeža-rādiuss: 4px;
kaste-ēna: 0 2px 4pxrgba(0, 0, 0, 0.1);
polsterējums: 10px;
ielaušanās iekšā: izvairīties-kolonna;
}
Šis piemērs arī definē ielaušanās iekšā īpašums uz .raksts klase, ar vērtību izvairīties-kolonna. Īpašums nodrošina, ka katrs raksts paliek vienā kolonnā, nevis tiek sadalīts vairākās kolonnās. Izkārtojumam vajadzētu izskatīties šādi:
Atkāpšanās iespēju izmantošana neatbalstītām pārlūkprogrammām
Ir svarīgi atzīmēt, ka kolonnu skaits rekvizīts netiek atbalstīts visās pārlūkprogrammās. Pārlūkprogrammas, kas neatbalsta kolonnu skaits, saturs tiks rādīts vienā kolonnā.
Lai nodrošinātu atkāpšanās stilus neatbalstītām pārlūkprogrammām, varat izmantot tādus funkciju vaicājumus kā @atbalsta lai noteiktu atbalstu kolonnu skaits īpašumu un nodrošināt alternatīvus stilus, ja īpašums netiek atbalstīts.
Piemēram:
.konteiners {
/* Atkāpšanās pārlūkprogrammām, kas neatbalsta kolonnu skaitu */
platums: 100%;
}
/* Noteikt atbalstu kolonnu skaitam */
@atbalsta (kolonnu skaits:3) {
.konteiners {
kolonnu skaits: 3;
}
}
Šajā piemērā mēs izmantojam @atbalsta funkcijas vaicājums, lai noteiktu atbalstu kolonnu skaits īpašums. Ja pārlūkprogramma atbalsta kolonnu skaitu, konteiners elements tiks parādīts trīs kolonnās. Ja pārlūkprogramma neatbalsta kolonnu skaitu, tā parādīs saturu vienā kolonnā, izmantojot platums īpašums.
Satura sadalīšana kolonnās
Kopumā CSS kolonnas nodrošina praktisku un jaudīgu veidu, kā izveidot elastīgus un atsaucīgus vairāku kolonnu izkārtojumus, kas uzlabo tīmekļa satura lietojamību un lietotāja pieredzi.
Izmantojot CSS kolonnas un JavaScript kopā, varat izveidot vēl sarežģītākus un dinamiskākus izkārtojumus, kas pielāgojas dažādām lietotāju preferencēm un ierīču izmēriem, padarot jūsu tīmekļa saturu pieejamāku un saistošāku lietotājiem.
