A CSS Multi-column Layout modul egy hatékony eszköz, amellyel egyszerűen hozhat létre többoszlopos elrendezéseket weboldalaihoz. A reszponzív tervezés térnyerése azt jelenti, hogy fontos megérteni, hogyan kell használni ezt a modult.
Az oszloptulajdonságok segítségével rugalmas és dinamikus elrendezéseket hozhat létre, amelyek alkalmazkodnak a különböző képernyőméretekhez.
Oszlopszám, szélesség és hézag megadása
Ha megfelelő többoszlopos elrendezést szeretne létrehozni az oldal tartalmához, először el kell döntenie, hány oszlopot szeretne átnyúlni. A Multi-column modul egyik legfontosabb tulajdonsága a oszlopszám tulajdonság, amellyel beállíthatja, hogy hány oszlopra osztja fel a tartalmat.
Például:
.tartály {
oszlopszám: 3;
}
Megadhatja az oszlopok szélességét és hézagát is. Az oszlopszélesség értékét bármelyik segítségével beállíthatja a támogatott CSS egységeket mint px, em, vagy %.
Ha oszlop szélesség be van állítva auto, a böngésző az egyes oszlopok szélességét a oszlopszám ingatlan és a rendelkezésre álló hely az elrendezésen belül.
Például ez a CSS deklarálja 3 oszlopok, mindegyik szélessége 200 pixelek:
.tartály {
oszlopszám: 3;
oszlop szélesség: 200px;
}
A oszlop-rés tulajdonság határozza meg az oszlopok közötti rést vagy helyet egy többoszlopos elrendezésben. Beállítja a szomszédos oszlopok közötti üres helyek méretét, és felvehet egy hosszértéket pixelben, ems-ben vagy bármely más támogatott egységben.
Például:
.tartály {
oszlopszám: 3;
oszlop-rés: 20px; /* az oszlopok közötti távolságot 20 képpontra állítja */
}
Alapértelmezés szerint az értéke oszlop-rés be van állítva Normál. Böngészője ezt az értéket úgy választja, hogy az elrendezésben egyenletes térközt érjen el az oszlopok között, miközben vizuálisan tetszetős marad. Ez az érték böngészőnként változhat, és függhet a betűmérettől, a sor magasságától, pozíció tulajdonságés az oszlopok tartalmának egyéb elrendezési tulajdonságait.
Az oszlopok egyensúlyának biztosítása
A CSS-oszlopok megpróbálják kitölteni az összes rendelkezésre álló helyet az elrendezésen belül. Ez néha jelentősen eltérő magasságú oszlopokat eredményezhet, így az elrendezés egyenetlennek tűnik.
Az oszlopok kiegyensúlyozásához ügyeljen arra, hogy az elrendezés minden oszlopában megközelítőleg azonos mennyiségű tartalom legyen.
Ezt a CSS beállításával érheti el oszlop-kitöltés tulajdonát egyensúly. A böngésző ezután megpróbálja egyenletesen elosztani a tartalmat az összes oszlop között, hogy azok nagyjából azonos magasságúak legyenek.
A oszlop-kitöltés tulajdonság értékre van állítva egyensúly alapértelmezés szerint, de értéke auto megváltoztatja ezt a viselkedést. Az automatikus használatával a tartalmat a rendelkezésre álló hely alapján osztja el az oszlopok között. Ez egyenetlen távolságot és egyenetlen oszlopmagasságot eredményezhet az oszlopok között. Akár üres oszlopokat tartalmazó elrendezést is készíthet.
Íme egy példa arra, hogyan kell használni a oszlop-kitöltés tulajdonság az oszlopok kiegyensúlyozására többoszlopos elrendezésben:
.multi-column-layout {
oszlopszám: 3;
oszlop-rés: 20px;
oszlop-kitöltés: egyensúly;
}
Ebben a példában egy többoszlopos elrendezés van három oszloppal, és az egyes oszlopok között 20 képpont távolság van. Beállításával a oszlop-kitöltés tulajdonát egyensúly, biztosítjuk, hogy a tartalom egyenletesen oszlik el az oszlopok között, ami kiegyensúlyozott oszlopmagasságot eredményez.
Fontos megjegyezni, hogy a oszlop-kitöltés Előfordulhat, hogy a tulajdonság nem működik jól minden elrendezésnél, és egyenetlen távolságot eredményezhet az oszlopok között. Ilyen esetekben előfordulhat, hogy JavaScriptet kell használnia az oszlopok kézi kiegyensúlyozásához. Ne felejtse el követni a legjobb gyakorlatokat és használjon progresszív javítást hogy ne hagyatkozzon a JavaScriptre.
Mindent összerakva
Összegyűjtheti mindazt, amit az elrendezés megvalósításáról tanult CSS-oszlopokkal, és felhasználhatja magazin stílusú elrendezés létrehozására.
Először készítse el az alapvető HTML-struktúrát. Használjon konténerelemet a tartalom burkolásához, majd hozzon létre több alárendelt elemet, amelyeket aztán oszlopokba rendezhet.
html>
<html>
<fej>
<linkrel="stíluslap"href="CSScolumns.css" />
fej>
<test>
Konténer elem
<divosztály="magazin-layout">Gyermek elemek
<divosztály="cikk">
<h2>Cikk címeh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed be
magna vel lorem pharetra bibendum.p>
div><divosztály="cikk">
<h2>Cikk címeh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed be
magna vel lorem pharetra bibendum.p>
div><divosztály="cikk">
<h2>Cikk címeh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed be
magna vel lorem pharetra bibendum.p>
div>
div>
test>
html>
Ha magazin stílusú elrendezést szeretne létrehozni a CSS többoszlopos modul használatával, kombinálja a oszlopszám, oszlop szélesség, oszlop-rés, és oszlop-kitöltés tulajdonságok:
.magazin-layout {
oszlopszám: 3;
oszlop szélesség: 300px;
oszlop-rés: 20px;
oszlop-kitöltés: egyensúly;
}
.cikk {
háttérszín: #f8f8f8;
határ-sugár: 4px;
doboz-árnyék: 0 2px 4pxrgba(0, 0, 0, 0.1);
párnázás: 10px;
betörni: elkerül-oszlop;
}
Ez a példa egyben meghatározza a betörni ingatlan a .cikk osztályú, értékkel elkerül-oszlop. A tulajdonság biztosítja, hogy minden cikk egyetlen oszlopon belül maradjon, ahelyett, hogy több oszlopra oszlana fel. Így kell kinéznie az elrendezésnek:
Tartalékok használata nem támogatott böngészőkhöz
Fontos megjegyezni, hogy a oszlopszám tulajdonság nem minden böngészőben támogatott. Böngészők, amelyek nem támogatják oszlopszám, helyette egyetlen oszlopban jeleníti meg a tartalmat.
Ha tartalékstílusokat szeretne biztosítani a nem támogatott böngészők számára, használhat olyan funkciólekérdezéseket, mint pl @támogatja támogatásának felderítésére a oszlopszám tulajdonságot, és alternatív stílusokat biztosítanak, ha a tulajdonság nem támogatott.
Például:
.tartály {
/* Tartalék az oszlopszámlálást nem támogató böngészőkhöz */
szélesség: 100%;
}
/* Az oszlopszám támogatásának észlelése */
@támogatja (oszlopszám:3) {
.tartály {
oszlopszám: 3;
}
}
Ebben a példában a @támogatja funkció lekérdezése a támogatás észleléséhez oszlopszám ingatlan. Ha a böngésző támogatja az oszlopszámlálást, a tartály elem három oszlopban jelenik meg. Ha a böngésző nem támogatja az oszlopszámlálást, a tartalmat egyetlen oszlopban jeleníti meg a segítségével szélesség ingatlan.
Tartalom bontása oszlopokra
Összességében a CSS-oszlopok praktikus és hatékony módot kínálnak rugalmas és érzékeny többoszlopos elrendezések létrehozására, amelyek javítják a webtartalom használhatóságát és felhasználói élményét.
A CSS oszlopok és a JavaScript együttes használatával még kifinomultabb és dinamikusabb elrendezéseket hozhat létre, amelyek alkalmazkodnak különböző felhasználói preferenciákhoz és eszközméretekhez, így webes tartalmai elérhetőbbé és vonzóbbá válnak a felhasználók számára.
