Home-theater-designers
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.
MAKEUSEOF A NAP VIDEÓJA GÖRGÖZSEN A TARTALOM FOLYTATÁSHOZ
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:
.container {
column-count: 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 , ban ben , 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.
az összes trófeát a snapchaten
Például ez a CSS deklarálja 3 oszlopok, mindegyik szélessége 200 pixelek:
.container {
column-count: 3;
column-width: 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:
.container {
column-count: 3;
column-gap: 20px; /* sets the gap between columns to 20 pixels */
}
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 {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}
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.
a laptop folyamatosan leesik a wifi windows 10 -ről
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.
<!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>
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:
hogyan kell elolvasni egy szöveges üzenetet anélkül, hogy megnyitná az androidot
.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;
}
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:
.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;
}
}
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 a különböző felhasználói preferenciákhoz és eszközméretekhez, így webes tartalmai elérhetőbbé és vonzóbbá teszik a felhasználókat.