Home-theater-designers
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.
VYUŽITIE VIDEA DŇA POKRAČUJTE V OBSAHU POKRAČOVANÍM
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:
.container {
column-count: 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 , v , 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:
excel skombinujte dva stĺpce do jedného
.container {
column-count: 3;
column-width: 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:
.container {
column-count: 3;
column-gap: 20px; /* sets the gap between columns to 20 pixels */
}
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ť polohy a ď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:
.multi-column-layout {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}
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.
ako zabrániť chrómu využívať toľko pamäte
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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSScolumns.css" />
</head>
<body>
<!-- Container Element -->
<div class="magazine-layout">
<!-- Child Elements -->
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
</div>
</body>
</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:
.magazine-layout {
column-count: 3;
column-width: 300px;
column-gap: 20px;
column-fill: balance;
}
.article {
background-color: #f8f8f8;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
break-inside: avoid-column;
}
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:
.container {
/* Fallback for browsers that do not support column-count */
width: 100%;
}
/* Detect support for column-count */
@supports (column-count: 3) {
.container {
column-count: 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žívaním stĺpcov CSS a JavaScriptu môžete vytvoriť ešte sofistikovanejšie a dynamickejšie rozloženia, ktoré sa prispôsobia rôznym preferenciám používateľov a veľkostiam zariadení, vďaka čomu bude váš webový obsah prístupnejší a pútavejší pre vašich používateľov.