CSS-i mitmeveerulise paigutuse moodul on võimas tööriist, mis võimaldab teil hõlpsasti luua oma veebilehtedele mitmeveerulisi paigutusi. Tundliku disaini kasv tähendab, et on oluline mõista, kuidas seda moodulit kasutada.
Veeru atribuutide abil saate luua paindlikke ja dünaamilisi paigutusi, mis kohanduvad erinevate ekraanisuurustega.
Veeru numbri, laiuse ja vahe määramine
Lehe sisu jaoks sobiva mitmeveerulise paigutuse loomiseks peaksite kõigepealt otsustama, mitu veergu soovite selle katta. Mitmeveerulise mooduli üks olulisemaid omadusi on veergude arv atribuut, mille abil saate määrata veergude arvu, milleks sisu jagada.
Näiteks:
.konteiner {
veergude arv: 3;
}
Samuti saate määrata veergude laiuse ja vahe. Saate määrata veeru laiuse väärtuse, kasutades ükskõik millist toetatud CSS-i üksused meeldib px, em, või %.
Kui veeru laius on seatud auto, arvutab brauser iga veeru laiuse selle põhjal veergude arv kinnisvara ja teie paigutuses saadaolev ruum.
Näiteks see CSS deklareerib 3 veerud, millest igaühe laius on 200 pikslid:
.konteiner {
veergude arv: 3;
veeru laius: 200px;
}
The veeru-vahe atribuut määrab mitmeveerulise paigutuse veergude vahelise tühiku või ruumi. See määrab külgnevate veergude vaheliste tühjade tühikute suuruse ja võib võtta pikkuse väärtuse pikslites, ems-ides või muudes toetatud ühikutes.
Näiteks:
.konteiner {
veergude arv: 3;
veeru-vahe: 20px; /* määrab veergude vahe 20 pikslile */
}
Vaikimisi on väärtus veeru-vahe on seatud normaalne. Teie brauser valib selle väärtuse, et saavutada paigutuses ühtlane veergude vahe, jäädes samal ajal visuaalselt meeldivaks. See väärtus võib brauseriteti erineda ja sõltuda ka fondi suurusest, rea kõrgusest, positsiooni varaja muud veergude sisu paigutuse omadused.
Veergude tasakaalu tagamine
CSS-i veerud püüavad täita kogu paigutuses saadaoleva ruumi. Selle tulemuseks võib mõnikord olla oluliselt erineva kõrgusega veerud, mis muudab paigutuse ebaühtlaseks.
Veergude tasakaalustamiseks peaksite veenduma, et paigutuse igas veerus on ligikaudu sama palju sisu.
Seda saate saavutada CSS-i seadistamisega veeru täitmine vara juurde tasakaalu. Seejärel proovib brauser jaotada sisu ühtlaselt kõigi veergude vahel, nii et need oleksid ligikaudu sama kõrgusega.
The veeru täitmine atribuut on seatud tasakaalu vaikimisi, kuid väärtus auto muudab seda käitumist. Automaatne kasutamine jaotab sisu veergude vahel olemasoleva ruumi alusel. Selle tulemuseks võib olla ebaühtlane sammaste vaheline kaugus ja veergude ebaühtlane kõrgus. See võib isegi luua tühjade veergudega paigutuse.
Siin on näide selle kohta, kuidas kasutada veeru täitmine atribuut veergude tasakaalustamiseks mitmeveerulises paigutuses:
.multi-column-layout {
veergude arv: 3;
veeru-vahe: 20px;
veeru täitmine: tasakaalu;
}
Selles näites on meil mitme veeru paigutus kolme veeruga ja iga veeru vaheline kaugus on 20 pikslit. Seades veeru täitmine vara juurde tasakaalu, tagame sisu ühtlase jaotumise veergude vahel, mille tulemuseks on veergude kõrgused tasakaalustatud.
Oluline on märkida, et veeru täitmine atribuut ei pruugi kõigi paigutuste puhul hästi töötada ja võib põhjustada veergude vahel ebaühtlase vahemaa. Sellistel juhtudel peate võib-olla kasutama JavaScripti veergude käsitsi tasakaalustamiseks. Ärge unustage järgida parimaid tavasid ja kasutage progressiivset täiustamist et te ei usaldaks JavaScripti.
Kõike kokku panema
Saate koondada kõik, mida olete CSS-i veergude abil paigutuse rakendamise kohta õppinud, ja kasutada seda ajakirja stiilis küljenduse loomiseks.
Esiteks looge HTML-i põhistruktuur. Kasutage oma sisu pakkimiseks konteinerielementi, seejärel looge mitu alamelementi, mida saate seejärel veergudesse paigutada.
html>
<html>
<pea>
<linkrel="laadileht"href="CSScolumns.css" />
pea>
<keha>
Konteineri element
<divklass="ajakirja küljendus">Lapse elemendid
<divklass="artikkel">
<h2>Artikli pealkirih2><lk>Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Sisestatud
magna vel lorem pharetra bibendum.lk>
div><divklass="artikkel">
<h2>Artikli pealkirih2><lk>Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Sisestatud
magna vel lorem pharetra bibendum.lk>
div><divklass="artikkel">
<h2>Artikli pealkirih2><lk>Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Sisestatud
magna vel lorem pharetra bibendum.lk>
div>
div>
keha>
html>
Ajakirja stiilis paigutuse loomiseks CSS-i mitme veeru mooduli abil ühendage veergude arv, veeru laius, veeru-vaheja veeru täitmine omadused:
.magazine-layout {
veergude arv: 3;
veeru laius: 300px;
veeru-vahe: 20px;
veeru täitmine: tasakaalu;
}
.artikkel {
taustavärv: #f8f8f8;
piiriraadius: 4px;
kast-vari: 0 2px 4pxrgba(0, 0, 0, 0.1);
polsterdus: 10px;
sissemurdmine: väldi-veerg;
}
See näide määratleb ka sissemurdmine kinnistul .artikkel klass, mille väärtus on väldi-veerg. Atribuut tagab, et iga artikkel jääb ühte veergu, mitte ei jagune mitmeks veeruks. Paigutus peaks välja nägema järgmine:
Varude kasutamine toetamata brauserite jaoks
Oluline on märkida, et veergude arv atribuuti ei toetata kõigis brauserites. Brauserid, mis ei toeta veergude arv, kuvab selle asemel sisu ühes veerus.
Toetamata brauserite jaoks varustiilide pakkumiseks võite kasutada funktsioonipäringuid, nagu @toetab et tuvastada toetus veergude arv atribuut ja pakkuda alternatiivseid stiile, kui atribuuti ei toetata.
Näiteks:
.konteiner {
/* Varumine brauserite jaoks, mis ei toeta veergude loendust */
laius: 100%;
}
/* Tuvastage veergude arvu tugi */
@toetab (veergude arv:3) {
.konteiner {
veergude arv: 3;
}
}
Selles näites kasutame @toetab funktsiooni päring, et tuvastada tugi veergude arv vara. Kui brauser toetab veergude loendamist, konteiner element kuvatakse kolmes veerus. Kui brauser ei toeta veergude loendamist, kuvab see sisu ühes veerus, kasutades laius vara.
Sisu jagamine veergudeks
Üldiselt pakuvad CSS-i veerud praktilist ja võimsat viisi paindlike ja tundlike mitmeveeruliste paigutuste loomiseks, mis parandavad veebisisu kasutatavust ja kasutuskogemust.
CSS-i veerge ja JavaScripti koos kasutades saate luua veelgi keerukamaid ja dünaamilisemaid paigutusi, mis kohanduvad erinevatele kasutajaeelistustele ja seadme suurustele, muutes teie veebisisu kasutajatele juurdepääsetavamaks ja köitvamaks.
