CSS Multi-column Layout -moduuli on tehokas työkalu, jonka avulla voit helposti luoda monisarakkeisia asetteluja verkkosivuillesi. Responsiivisen suunnittelun nousu tarkoittaa, että on tärkeää ymmärtää, miten tätä moduulia käytetään.
Sarakeominaisuuksien avulla voit luoda joustavia ja dynaamisia asetteluja, jotka mukautuvat eri näyttökokoihin.
Sarakkeen numeron, leveyden ja välin määrittäminen
Jos haluat luoda sopivan monisarakkeen asettelun sivusi sisällölle, sinun tulee aloittaa päättämällä, kuinka monta saraketta haluat sen sisältävän. Yksi Multi-column-moduulin tärkeimmistä ominaisuuksista on sarakkeiden määrä ominaisuus, jonka avulla määrität sarakkeiden määrän, joihin sisältö jaetaan.
Esimerkiksi:
.container {
sarakkeiden määrä: 3;
}
Voit myös määrittää sarakkeiden leveyden ja välin. Voit asettaa sarakkeen leveyden arvon käyttämällä mitä tahansa tuetut CSS-yksiköt Kuten px, em, tai %.
Jos sarakkeen leveys on asetettu auto, selain laskee jokaisen sarakkeen leveyden perusteella sarakkeiden määrä kiinteistö ja käytettävissä oleva tila asettelun sisällä.
Esimerkiksi tämä CSS ilmoittaa 3 sarakkeita, joiden leveys on 200 pikseliä:
.container {
sarakkeiden määrä: 3;
sarakkeen leveys: 200px;
}
The pylväsväli ominaisuus määrittää sarakkeiden välisen raon monisarakkeisessa asettelussa. Se määrittää vierekkäisten sarakkeiden välisten tyhjien tilojen koon ja voi ottaa pituusarvon pikseleinä, ems-yksiköinä tai muina tuetuina yksiköinä.
Esimerkiksi:
.container {
sarakkeiden määrä: 3;
pylväsväli: 20px; /* asettaa sarakkeiden välisen etäisyyden 20 pikseliin */
}
Oletuksena arvo pylväsväli on asetettu normaali. Selaimesi valitsee tämän arvon saavuttaakseen tasaisen sarakkeiden välin asettelussasi samalla, kun se pysyy visuaalisesti miellyttävänä. Tämä arvo voi myös vaihdella selaimen välillä ja se voi myös riippua fontin koosta, rivin korkeudesta, aseman omaisuutta, ja muut sarakkeiden sisällön asetteluominaisuudet.
Sarakkeiden tasapainon varmistaminen
CSS-sarakkeet yrittävät täyttää kaiken käytettävissä olevan tilan asettelun sisällä. Tämä voi joskus johtaa sarakkeisiin, joiden korkeus vaihtelee huomattavasti, mikä tekee asettelusta epätasaisen.
Sarakkeiden tasapainottamiseksi sinun tulee varmistaa, että asettelun jokaisessa sarakkeessa on suunnilleen sama määrä sisältöä.
Voit saavuttaa tämän asettamalla CSS: n sarakkeen täyttö omaisuutta saldo. Selain yrittää sitten jakaa sisällön tasaisesti kaikkiin sarakkeisiin niin, että ne ovat suunnilleen samalla korkeudella.
The sarakkeen täyttö ominaisuus on asetettu saldo oletuksena, mutta arvo auto muuttaa tämän käytöksen. Automaattinen jakaa sisällön sarakkeisiin käytettävissä olevan tilan perusteella. Tämä voi johtaa epätasaisiin sarakkeiden väliin ja epätasaisiin sarakkeiden korkeuksiin. Se voi jopa tuottaa asettelun tyhjillä sarakkeilla.
Tässä on esimerkki kuinka käyttää sarakkeen täyttö ominaisuus sarakkeiden tasapainottamiseksi monisarakkeisessa asettelussa:
.multi-column-layout {
sarakkeiden määrä: 3;
pylväsväli: 20px;
sarakkeen täyttö: saldo;
}
Tässä esimerkissä meillä on usean sarakkeen asettelu, jossa on kolme saraketta ja 20 pikselin väli kunkin sarakkeen välillä. Asettamalla sarakkeen täyttö omaisuutta saldo, varmistamme, että sisältö jakautuu tasaisesti sarakkeiden välillä, mikä johtaa tasapainoisiin sarakkeiden korkeuksiin.
On tärkeää huomata, että sarakkeen täyttö ominaisuus ei välttämättä toimi hyvin kaikissa asetteluissa ja voi johtaa epätasaisiin sarakkeiden väliin. Tällaisissa tapauksissa saatat joutua käyttämään JavaScriptiä tasapainottaaksesi sarakkeet manuaalisesti. Muista noudattaa parhaita käytäntöjä ja käytä progressiivista tehostusta jotta et luota JavaScriptiin.
Laittamalla kaikki yhteen
Voit koota kaiken, mitä olet oppinut asettelun toteuttamisesta CSS-sarakkeiden avulla, ja käyttää sitä aikakauslehtityyppisen asettelun luomiseen.
Luo ensin HTML-perusrakenne. Käytä säilöelementtiä sisältösi käärimiseen ja luo sitten useita alielementtejä, jotka voit asetella sarakkeisiin.
html>
<html>
<pää>
<linkkirel="tyylitaulukko"href="CSScolumns.css" />
pää>
<kehon>
Säiliön elementti
<divluokkaa="lehden ulkoasu">Lapsielementit
<divluokkaa="artikla">
<h2>Artikkelin otsikkoh2><s>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laitettu sisään
magna vel lorem pharetra bibendum.s>
div><divluokkaa="artikla">
<h2>Artikkelin otsikkoh2><s>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laitettu sisään
magna vel lorem pharetra bibendum.s>
div><divluokkaa="artikla">
<h2>Artikkelin otsikkoh2><s>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laitettu sisään
magna vel lorem pharetra bibendum.s>
div>
div>
kehon>
html>
Voit luoda aikakauslehtityyppisen asettelun käyttämällä CSS-monisarakemoduulia yhdistämällä sarakkeiden määrä, sarakkeen leveys, pylväsväli, ja sarakkeen täyttö ominaisuudet:
.magazine-layout {
sarakkeiden määrä: 3;
sarakkeen leveys: 300px;
pylväsväli: 20px;
sarakkeen täyttö: saldo;
}
.artikla {
taustaväri: #f8f8f8;
raja-säde: 4px;
laatikko-varjo: 0 2px 4pxrgba(0, 0, 0, 0.1);
pehmuste: 10px;
murtautua sisään: vältä-sarake;
}
Tämä esimerkki määrittelee myös murtautua sisään omaisuutta .artikla luokka, jonka arvo on vältä-sarake. Ominaisuus varmistaa, että jokainen artikkeli pysyy yhdessä sarakkeessa sen sijaan, että se jakautuisi useisiin sarakkeisiin. Asettelun pitäisi näyttää tältä:
Varatoimintojen käyttäminen ei-tuetuille selaimille
On tärkeää huomata, että sarakkeiden määrä ominaisuutta ei tueta kaikissa selaimissa. Selaimet, jotka eivät tue sarakkeiden määrä, näyttää sisällön sen sijaan yhdessä sarakkeessa.
Jos haluat tarjota varatyylejä ei-tuetuille selaimille, voit käyttää ominaisuuskyselyitä, kuten @tukee tunnistaakseen tuen sarakkeiden määrä ja tarjota vaihtoehtoisia tyylejä, kun ominaisuutta ei tueta.
Esimerkiksi:
.container {
/* Varavaihtoehto selaimille, jotka eivät tue sarakkeiden laskemista */
leveys: 100%;
}
/* Tunnista sarakkeiden lukumäärän tuki */
@tukee (sarakkeiden määrä:3) {
.container {
sarakkeiden määrä: 3;
}
}
Tässä esimerkissä käytämme @tukee ominaisuuskyselyn tuen havaitsemiseksi sarakkeiden määrä omaisuutta. Jos selain tukee sarakkeiden laskemista, kontti elementti näkyy kolmessa sarakkeessa. Jos selain ei tue sarakkeiden laskemista, se näyttää sisällön yhdessä sarakkeessa käyttämällä leveys omaisuutta.
Sisällön jakaminen sarakkeiksi
Kaiken kaikkiaan CSS-sarakkeet tarjoavat käytännöllisen ja tehokkaan tavan luoda joustavia ja reagoivia monisarakkeisia asetteluja, jotka parantavat verkkosisällön käytettävyyttä ja käyttökokemusta.
Käyttämällä CSS-sarakkeita ja JavaScriptiä yhdessä voit luoda entistä kehittyneempiä ja dynaamisempia asetteluja, jotka mukautuvat eri käyttäjien mieltymyksiin ja laitekokoihin, mikä tekee verkkosisällöstäsi helpommin saavutettavissa ja kiinnostavampaa käyttäjillesi.
