Modul CSS Multi-column Layout je zmogljivo orodje, ki vam omogoča enostavno ustvarjanje večstolpčnih postavitev za vaše spletne strani. Vzpon odzivnega dizajna pomeni, da je pomembno razumeti, kako uporabljati ta modul.
Lastnosti stolpcev lahko uporabite za ustvarjanje prilagodljivih in dinamičnih postavitev, ki se prilagajajo različnim velikostim zaslona.
Določanje številke stolpca, širine in vrzeli
Če želite ustvariti ustrezno postavitev z več stolpci za vsebino vaše strani, se morate začeti z odločitvijo, koliko stolpcev želite, da obsega. Ena najpomembnejših lastnosti v modulu z več stolpci je štetje stolpcev lastnost, ki jo uporabite za nastavitev števila stolpcev, na katere želite razdeliti vsebino.
Na primer:
.posoda {
štetje stolpcev: 3;
}
Določite lahko tudi širino in razmik stolpcev. Vrednost širine stolpca lahko nastavite s katero koli od podprte enote CSS kot px, em, oz %.
če širina stolpca je nastavljeno na avto, bo brskalnik izračunal širino vsakega stolpca na podlagi štetje stolpcev lastnosti in razpoložljivega prostora znotraj vaše postavitve.
Na primer, ta CSS izjavi 3 stolpcev, vsak s širino 200 slikovnih pik:
.posoda {
štetje stolpcev: 3;
širina stolpca: 200px;
}
The vrzel v stolpcu Lastnost določa vrzel ali presledek med stolpci v postavitvi z več stolpci. Nastavil bo velikost praznih prostorov med sosednjimi stolpci in lahko sprejme vrednost dolžine v slikovnih pikah, ems ali kateri koli drugi podprti enoti.
Na primer:
.posoda {
štetje stolpcev: 3;
vrzel v stolpcu: 20px; /* nastavi razmik med stolpci na 20 slikovnih pik */
}
Privzeto je vrednost vrzel v stolpcu je nastavljeno na normalno. Vaš brskalnik izbere to vrednost, da doseže dosleden razmik med stolpci v vaši postavitvi, hkrati pa ostane vizualno prijeten. Ta vrednost se lahko razlikuje tudi med brskalniki in je lahko odvisna tudi od velikosti pisave, višine vrstice, položajna lastninain druge lastnosti postavitve vsebine stolpcev.
Zagotavljanje ravnovesja stolpcev
Stolpci CSS poskušajo zapolniti ves razpoložljivi prostor znotraj postavitve. To lahko včasih privede do stolpcev, ki imajo precej različne višine, zaradi česar je postavitev videti neenakomerna.
Za uravnoteženje stolpcev se morate prepričati, da ima vsak stolpec v vaši postavitvi približno enako količino vsebine.
To lahko dosežete z nastavitvijo CSS polnjenje stolpcev premoženje do ravnovesje. Brskalnik bo nato poskušal enakomerno porazdeliti vsebino po vseh stolpcih, tako da bodo približno enako visoki.
The polnjenje stolpcev lastnost je nastavljena na ravnovesje privzeto, vendar vrednost avto bo to vedenje spremenilo. Če uporabite samodejno, se vsebina porazdeli po stolpcih glede na razpoložljivi prostor. To lahko povzroči neenakomerne razdalje med stebri in neenakomerne višine stebrov. Ustvari lahko celo postavitev s praznimi stolpci.
Tukaj je primer, kako uporabiti polnjenje stolpcev lastnost za uravnoteženje stolpcev v postavitvi z več stolpci:
.postavitev z več stolpci {
štetje stolpcev: 3;
vrzel v stolpcu: 20px;
polnjenje stolpcev: ravnovesje;
}
V tem primeru imamo postavitev z več stolpci s tremi stolpci in vrzeljo 20 slikovnih pik med vsakim stolpcem. Z nastavitvijo polnjenje stolpcev premoženje do ravnovesje, zagotovimo, da se vsebina enakomerno porazdeli po stolpcih, kar ima za posledico uravnotežene višine stolpcev.
Pomembno je omeniti, da je polnjenje stolpcev Lastnost morda ne bo delovala dobro za vse postavitve in lahko povzroči neenakomeren razmik med stolpci. V takih primerih boste morda morali uporabiti JavaScript za ročno uravnoteženje stolpcev. Ne pozabite upoštevati najboljših praks in uporabite progresivno izboljšavo tako da se ne zanašate na JavaScript.
Vse to skupaj
Vse, kar ste se naučili o izvajanju postavitve s stolpci CSS, lahko združite in uporabite za ustvarjanje postavitve v slogu revije.
Najprej ustvarite osnovno strukturo HTML. Uporabite vsebniški element, da zavijete svojo vsebino, nato ustvarite več podrejenih elementov, ki jih lahko nato postavite v stolpce.
html>
<html>
<glavo>
<povezavarel="stylesheet"href="CSScolumns.css" />
glavo>
<telo>
Element vsebnika
<divrazred="postavitev revije">Otroški elementi
<divrazred="Članek">
<h2>Naslov člankah2><str>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.str>
div><divrazred="Članek">
<h2>Naslov člankah2><str>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.str>
div><divrazred="Članek">
<h2>Naslov člankah2><str>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.str>
div>
div>
telo>
html>
Če želite ustvariti postavitev v slogu revije z modulom CSS Multi-column, združite štetje stolpcev, širina stolpca, vrzel v stolpcu, in polnjenje stolpcev lastnosti:
.postavitev revije {
štetje stolpcev: 3;
širina stolpca: 300px;
vrzel v stolpcu: 20px;
polnjenje stolpcev: ravnovesje;
}
.Članek {
Barva ozadja: #f8f8f8;
mejni polmer: 4px;
box-shadow: 0 2px 4pxrgba(0, 0, 0, 0.1);
oblazinjenje: 10px;
vlom v notranjost: izogibajte se-stolpcu;
}
Ta primer tudi opredeljuje vlom v notranjost lastnina na .Članek razreda, z vrednostjo izogibajte se-stolpcu. Lastnost zagotavlja, da vsak članek ostane v enem samem stolpcu, namesto da bi bil razdeljen na več stolpcev. Takole naj bi izgledala postavitev:
Uporaba nadomestnih možnosti za nepodprte brskalnike
Pomembno je omeniti, da je štetje stolpcev Lastnost ni podprta v vseh brskalnikih. Brskalniki, ki ne podpirajo štetje stolpcev, namesto tega prikaže vsebino v enem samem stolpcu.
Če želite zagotoviti nadomestne sloge za nepodprte brskalnike, lahko uporabite poizvedbe funkcij, kot je @podpira za odkrivanje podpore za štetje stolpcev lastnost in zagotovite alternativne sloge, ko lastnost ni podprta.
Na primer:
.posoda {
/* Nadomestna možnost za brskalnike, ki ne podpirajo štetja stolpcev */
premer: 100%;
}
/* Zaznaj podporo za število stolpcev */
@podpira (stolpec-štetje:3) {
.posoda {
štetje stolpcev: 3;
}
}
V tem primeru uporabljamo @podpira poizvedba po funkciji za odkrivanje podpore za štetje stolpcev premoženje. Če brskalnik podpira štetje stolpcev, bo posoda element bo prikazan v treh stolpcih. Če brskalnik ne podpira štetja stolpcev, bo prikazal vsebino v enem samem stolpcu z uporabo premer premoženje.
Razdelitev vsebine v stolpce
Na splošno stolpci CSS zagotavljajo praktičen in zmogljiv način za ustvarjanje prilagodljivih in odzivnih postavitev z več stolpci, ki izboljšajo uporabnost in uporabniško izkušnjo spletne vsebine.
S skupno uporabo stolpcev CSS in JavaScripta lahko ustvarite še bolj prefinjene in dinamične postavitve, ki se prilagajajo na različne nastavitve uporabnikov in velikosti naprav, zaradi česar bo vaša spletna vsebina bolj dostopna in zanimiva za vaše uporabnike.