Modul CSS Multi-column Layout je výkonný nástroj, který vám umožní snadno vytvářet vícesloupcové rozvržení vašich webových stránek. Vzestup responzivního designu znamená, že je důležité pochopit, jak tento modul používat.
Vlastnosti sloupců můžete použít k vytvoření flexibilních a dynamických rozvržení, která se přizpůsobí různým velikostem obrazovky.
Určení čísla sloupce, šířky a mezery
Chcete-li vytvořit vhodné rozvržení s více sloupci pro obsah stránky, měli byste začít tím, že se rozhodnete, kolik sloupců má obsahovat. Jednou z nejdůležitějších vlastností v modulu Multi-column je počet sloupců vlastnost, pomocí které nastavíte počet sloupců, do kterých se má obsah rozdělit.
Například:
.kontejner {
počet sloupců: 3;
}
Můžete také určit šířku a mezeru sloupců. Hodnotu šířky sloupce můžete nastavit pomocí kterékoli z podporované jednotky CSS jako px, emnebo %.
Li šířka sloupce je nastaveno na auto, prohlížeč vypočítá šířku každého sloupce na základě počet sloupců nemovitost a dostupný prostor uvnitř vašeho rozvržení.
Například tento CSS deklaruje 3 sloupců, každý o šířce 200 pixely:
.kontejner {
počet sloupců: 3;
šířka sloupce: 200px;
}
The sloupec-mezera vlastnost určuje mezeru nebo mezeru mezi sloupci v rozložení s více sloupci. Nastaví velikost prázdných mezer mezi sousedními sloupci a může mít hodnotu délky v pixelech, ems nebo jiných podporovaných jednotkách.
Například:
.kontejner {
počet sloupců: 3;
sloupec-mezera: 20px; /* nastaví mezeru mezi sloupci na 20 pixelů */
}
Ve výchozím nastavení je hodnota sloupec-mezera je nastaveno na normální. Váš prohlížeč zvolí tuto hodnotu, aby dosáhl konzistentního rozestupu mezi sloupci ve vašem rozvržení a zároveň zůstal vizuálně příjemný. Tato hodnota se také může lišit mezi prohlížeči a může také záviset na velikosti písma, výšce řádku, vlastnost pozicea další vlastnosti rozložení obsahu sloupců.
Zajištění rovnováhy sloupců
Sloupce CSS se snaží zaplnit veškerý dostupný prostor uvnitř rozvržení. To může někdy vést ke sloupcům, které mají výrazně odlišné výšky, takže rozložení vypadá nerovnoměrně.
Chcete-li vyvážit sloupce, měli byste se ujistit, že každý sloupec ve vašem rozvržení má přibližně stejné množství obsahu.
Toho dosáhnete nastavením CSS sloupec-výplň majetek do Zůstatek. Prohlížeč se pak pokusí distribuovat obsah rovnoměrně do všech sloupců tak, aby byly zhruba stejně vysoké.
The sloupec-výplň vlastnost je nastavena na Zůstatek ve výchozím nastavení, ale hodnotu auto toto chování změní. Pomocí funkce auto se obsah rozdělí do sloupců na základě dostupného místa. To může mít za následek nerovnoměrné rozestupy mezi sloupy a nerovnoměrné výšky sloupců. Může dokonce vytvořit rozložení s prázdnými sloupci.
Zde je příklad, jak použít sloupec-výplň vlastnost pro vyvážení sloupců v rozložení s více sloupci:
.multi-column-layout {
počet sloupců: 3;
sloupec-mezera: 20px;
sloupec-výplň: Zůstatek;
}
V tomto příkladu máme vícesloupcové rozložení se třemi sloupci a mezerou 20 pixelů mezi každým sloupcem. Nastavením sloupec-výplň majetek do Zůstatek, zajistíme, aby se obsah rozmístil rovnoměrně po sloupcích, výsledkem čehož jsou vyvážené výšky sloupců.
Je důležité poznamenat, že sloupec-výplň vlastnost nemusí fungovat dobře pro všechna rozvržení a může mít za následek nerovnoměrné rozestupy mezi sloupci. V takových případech možná budete muset použít JavaScript k ručnímu vyvážení sloupců. Nezapomeňte dodržovat osvědčené postupy a používat progresivní vylepšení abyste se nespoléhali na JavaScript.
Dát to všechno dohromady
Vše, co jste se naučili o implementaci rozvržení, můžete spojit se sloupci CSS a použít to k vytvoření rozvržení ve stylu časopisu.
Nejprve vytvořte základní strukturu HTML. Použijte prvek kontejneru k zabalení obsahu a poté vytvořte několik podřízených prvků, které pak můžete rozložit do sloupců.
html>
<html>
<hlava>
<odkazrel="stylesheet"href="CSScolumns.css" />
hlava>
<tělo>
Kontejnerový prvek
<divtřída="rozvržení časopisu">Podřízené prvky
<divtřída="článek">
<h2>Název článkuh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed v
magna vel lorem pharetra bibendum.p>
div><divtřída="článek">
<h2>Název článkuh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed v
magna vel lorem pharetra bibendum.p>
div><divtřída="článek">
<h2>Název článkuh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed v
magna vel lorem pharetra bibendum.p>
div>
div>
tělo>
html>
Chcete-li vytvořit rozvržení ve stylu časopisu pomocí modulu CSS Multi-column, zkombinujte počet sloupců, šířka sloupce, sloupec-mezera, a sloupec-výplň vlastnosti:
.rozvržení časopisu {
počet sloupců: 3;
šířka sloupce: 300px;
sloupec-mezera: 20px;
sloupec-výplň: Zůstatek;
}
.článek {
barva pozadí: #f8f8f8;
hraniční poloměr: 4px;
box-shadow: 0 2px 4pxrgba(0, 0, 0, 0.1);
vycpávka: 10px;
vloupání dovnitř: vyhnout se sloupci;
}
Tento příklad také definuje vloupání dovnitř nemovitost na .článek třídy, s hodnotou vyhnout se sloupci. Tato vlastnost zajišťuje, že každý článek zůstane v jednom sloupci, nikoli rozdělení do více sloupců. Rozvržení by mělo vypadat následovně:
Použití záložních reklam pro nepodporované prohlížeče
Je důležité poznamenat, že počet sloupců vlastnost není podporována ve všech prohlížečích. Prohlížeče, které nepodporují počet sloupců, místo toho zobrazí obsah v jediném sloupci.
Chcete-li poskytnout záložní styly pro nepodporované prohlížeče, můžete použít dotazy jako např @podporuje zjistit podporu pro počet sloupců vlastnost a poskytnout alternativní styly, když vlastnost není podporována.
Například:
.kontejner {
/* Záloha pro prohlížeče, které nepodporují počet sloupců */
šířka: 100%;
}
/* Zjistit podporu pro počet sloupců */
@podporuje (počet sloupců:3) {
.kontejner {
počet sloupců: 3;
}
}
V tomto příkladu používáme @podporuje funkce dotaz k detekci podpory pro počet sloupců vlastnictví. Pokud prohlížeč podporuje počet sloupců, kontejner prvek se zobrazí ve třech sloupcích. Pokud prohlížeč nepodporuje počítání sloupců, zobrazí obsah v jednom sloupci pomocí šířka vlastnictví.
Rozdělení obsahu do sloupců
Sloupce CSS celkově poskytují praktický a výkonný způsob, jak vytvořit flexibilní a responzivní rozvržení s více sloupci, které zlepšují použitelnost a uživatelskou zkušenost s webovým obsahem.
Společným použitím sloupců CSS a JavaScriptu můžete vytvořit ještě sofistikovanější a dynamičtější rozvržení, která se přizpůsobí na různé uživatelské preference a velikosti zařízení, díky čemuž bude váš webový obsah pro vaše uživatele dostupnější a poutavější.
