Modul CSS Multi-column Layout je výkonný nástroj, ktorý vám umožňuje jednoducho vytvárať viacstĺpcové rozloženia pre vaše webové stránky. Vzostup responzívneho dizajnu znamená, že je dôležité pochopiť, ako tento modul používať.
Vlastnosti stĺpcov môžete použiť na vytvorenie flexibilných a dynamických rozložení, ktoré sa prispôsobia rôznym veľkostiam obrazovky.
Určenie čísla stĺpca, šírky a medzery
Ak chcete vytvoriť vhodné rozloženie s viacerými stĺpcami pre obsah stránky, mali by ste začať tým, že sa rozhodnete, koľko stĺpcov má obsahovať. Jednou z najdôležitejších vlastností v module Multi-column je počet stĺpcov vlastnosť, pomocou ktorej nastavíte počet stĺpcov na rozdelenie obsahu.
Napríklad:
.kontajner {
počet stĺpcov: 3;
}
Môžete tiež určiť šírku a medzeru stĺpcov. Hodnotu šírky stĺpca môžete nastaviť pomocou ktorejkoľvek z možností podporované jednotky CSS Páči sa mi to px, em, alebo %.
Ak šírka stĺpca je nastavený na auto, prehliadač vypočíta šírku každého stĺpca na základe počet stĺpcov nehnuteľnosť a dostupný priestor vo vašom usporiadaní.
Napríklad tento CSS deklaruje 3 stĺpce, každý so šírkou 200 pixely:
.kontajner {
počet stĺpcov: 3;
šírka stĺpca: 200px;
}
The stĺpec-medzera vlastnosť určuje medzeru alebo priestor medzi stĺpcami v rozložení s viacerými stĺpcami. Nastaví veľkosť prázdnych medzier medzi susednými stĺpcami a môže mať hodnotu dĺžky v pixeloch, ems alebo iných podporovaných jednotkách.
Napríklad:
.kontajner {
počet stĺpcov: 3;
stĺpec-medzera: 20px; /* nastaví medzeru medzi stĺpcami na 20 pixelov */
}
V predvolenom nastavení je hodnota stĺpec-medzera je nastavený na normálne. Váš prehliadač zvolí túto hodnotu, aby dosiahol konzistentné medzery medzi stĺpcami vo vašom rozložení a zároveň zostal vizuálne príjemný. Táto hodnota sa môže líšiť aj medzi prehliadačmi a môže závisieť aj od veľkosti písma, výšky riadku, vlastnosť polohya ďalšie vlastnosti rozloženia obsahu stĺpcov.
Zabezpečenie rovnováhy stĺpcov
Stĺpce CSS sa snažia vyplniť všetok dostupný priestor v rozložení. To môže niekedy viesť k stĺpcom, ktoré majú výrazne rozdielnu výšku, takže rozloženie vyzerá nerovnomerne.
Ak chcete vyvážiť stĺpce, mali by ste sa uistiť, že každý stĺpec vo vašom rozložení má približne rovnaké množstvo obsahu.
Môžete to dosiahnuť nastavením CSS stĺpec-výplň majetok do rovnováhu. Prehliadač sa potom pokúsi distribuovať obsah rovnomerne vo všetkých stĺpcoch tak, aby boli približne v rovnakej výške.
The stĺpec-výplň vlastnosť je nastavená na rovnováhu štandardne, ale hodnota auto zmení toto správanie. Pomocou automatického rozdelenia obsahu do stĺpcov na základe dostupného priestoru. To môže mať za následok nerovnomerné rozostupy medzi stĺpmi a nerovnomerné výšky stĺpcov. Môže dokonca vytvoriť rozloženie s prázdnymi stĺpcami.
Tu je príklad, ako použiť stĺpec-výplň vlastnosť na vyváženie stĺpcov v rozložení s viacerými stĺpcami:
.rozloženie s viacerými stĺpcami {
počet stĺpcov: 3;
stĺpec-medzera: 20px;
stĺpec-výplň: rovnováhu;
}
V tomto príklade máme viacstĺpcové rozloženie s tromi stĺpcami a medzerou 20 pixelov medzi každým stĺpcom. Nastavením stĺpec-výplň majetok do rovnováhu, zabezpečíme, aby sa obsah rozložil rovnomerne v stĺpcoch, výsledkom čoho sú vyvážené výšky stĺpcov.
Je dôležité poznamenať, že stĺpec-výplň vlastnosť nemusí fungovať dobre pre všetky rozloženia a môže mať za následok nerovnomerné rozostupy medzi stĺpcami. V takýchto prípadoch možno budete musieť použiť JavaScript na manuálne vyváženie stĺpcov. Nezabudnite dodržiavať osvedčené postupy a použiť progresívne vylepšenie aby ste sa nespoliehali na JavaScript.
Dávať to všetko dokopy
Všetko, čo ste sa naučili o implementácii rozloženia, môžete spojiť so stĺpcami CSS a použiť to na vytvorenie rozloženia v štýle časopisu.
Najprv vytvorte základnú štruktúru HTML. Použite kontajnerový prvok na zabalenie obsahu a potom vytvorte niekoľko podradených prvkov, ktoré potom môžete rozložiť do stĺpcov.
html>
<html>
<hlavu>
<odkazrel="štýlov"href="CSScolumns.css" />
hlavu>
<telo>
Kontajnerový prvok
<divtrieda="rozloženie časopisu">Detské prvky
<divtrieda="článok">
<h2>Názov článkuh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed v
magna vel lorem pharetra bibendum.p>
div><divtrieda="článok">
<h2>Názov článkuh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed v
magna vel lorem pharetra bibendum.p>
div><divtrieda="článok">
<h2>Názov článkuh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed v
magna vel lorem pharetra bibendum.p>
div>
div>
telo>
html>
Ak chcete vytvoriť rozloženie v štýle časopisu pomocou modulu CSS Multi-column, skombinujte počet stĺpcov, šírka stĺpca, stĺpec-medzera, a stĺpec-výplň vlastnosti:
.časopis-rozloženie {
počet stĺpcov: 3;
šírka stĺpca: 300px;
stĺpec-medzera: 20px;
stĺpec-výplň: rovnováhu;
}
.článok {
farba pozadia: #f8f8f8;
hraničný polomer: 4px;
box-shadow: 0 2px 4pxrgba(0, 0, 0, 0.1);
vypchávka: 10px;
vlámanie dovnútra: vyhnúť-stĺpec;
}
Tento príklad tiež definuje vlámanie dovnútra nehnuteľnosť na .článok triedy, s hodnotou vyhnúť-stĺpec. Vlastnosť zaisťuje, že každý článok zostane v jednom stĺpci, a nie rozdeľovanie do viacerých stĺpcov. Rozloženie by malo vyzerať takto:
Používanie záložných riešení pre nepodporované prehliadače
Je dôležité poznamenať, že počet stĺpcov vlastnosť nie je podporovaná vo všetkých prehliadačoch. Prehliadače, ktoré nepodporujú počet stĺpcov, namiesto toho zobrazí obsah v jednom stĺpci.
Ak chcete poskytnúť záložné štýly pre nepodporované prehliadače, môžete použiť funkčné dotazy, ako napr @podporuje na zistenie podpory pre počet stĺpcov vlastnosť a poskytnúť alternatívne štýly, keď vlastnosť nie je podporovaná.
Napríklad:
.kontajner {
/* Záloha pre prehliadače, ktoré nepodporujú počet stĺpcov */
šírka: 100%;
}
/* Zistiť podporu pre počet stĺpcov */
@podporuje (počet stĺpcov:3) {
.kontajner {
počet stĺpcov: 3;
}
}
V tomto príklade používame @podporuje funkcia dotaz na zistenie podpory pre počet stĺpcov nehnuteľnosť. Ak prehliadač podporuje počet stĺpcov, kontajner prvok sa zobrazí v troch stĺpcoch. Ak prehliadač nepodporuje počítanie stĺpcov, zobrazí obsah v jednom stĺpci pomocou šírka nehnuteľnosť.
Rozdelenie obsahu do stĺpcov
Celkovo poskytujú stĺpce CSS praktický a výkonný spôsob vytvárania flexibilných a responzívnych rozložení s viacerými stĺpcami, ktoré zlepšujú použiteľnosť a používateľskú skúsenosť s webovým obsahom.
Spoločným použitím stĺpcov CSS a JavaScriptu môžete vytvoriť ešte sofistikovanejšie a dynamickejšie rozloženia, ktoré sa prispôsobia na rôzne preferencie používateľov a veľkosti zariadení, vďaka čomu bude váš webový obsah pre vašich používateľov prístupnejší a pútavejší.
