CSS
HTML
COMPONENTS
CODE HUB
CSS Column Generator
Konfiguráció
Oszlopok száma
Osztály
Előnézet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Kód
border: 1px solid #000000;ReadyTools Academy
Tanulj HTML-t, CSS-t és JavaScriptet teljesen ingyen a ReadyTools Academy keretében.
Kövesd a tanulásodat, fejlődj a saját tempódban, és szórakozz közben! 🎯
Kezdj beleCSS Column Generator
A CSS-ben a column tulajdonságot arra használják, hogy megadják, hány oszlopra kell osztani egy elemet elrendezési célokból, különösen akkor, ha több oszlopos szöveges elrendezést szeretne létrehozni. Lehetővé teszi, hogy újság- vagy magazinszerű oszlopos elrendezéseket hozzon létre a szöveges tartalomhoz.
Íme egy példa a column tulajdonság használatára:
.my-element {
columns: 2;
}
.another-element {
columns: 3;
column-gap: 20px;
}
Ebben a példában:
- A '.my-element' osztály két oszlopos elrendezést hoz létre a tartalomhoz, amelyre vonatkozik.
- A '.another-element' osztály három oszlopos elrendezést hoz létre, az oszlopok között 20 pixeles távolsággal.
Az oszlopok számát, az oszlopszélességet és az oszlopokkal kapcsolatos egyéb tulajdonságokat szükség szerint módosíthatja, hogy elérje a kívánt elrendezést a szöveges tartalom számára. Az oszlopok tulajdonság különösen hasznos a reszponzív elrendezések létrehozásához, ahol az oszlopok száma a rendelkezésre álló hely alapján módosítható, megkönnyítve a szöveg kezelését különböző képernyőméretekben.