Több oszlopos elrendezés (Magazin-hasonló) CSS3-mal
Általánosságban elmondható, hogy az emberek elveszítik a számot a rendkívül hosszú tartalom olvasásakor. Ezért a nyomtatott médiában, mint a magazinok és újságok, a tartalom több oszlopra osztható az egyszerű olvasáshoz.
Egy oszlop létrehozása az interneten teljesen más történet. Ez elég nehéz. Tény, hogy nem túl régen lehet, hogy manuálisan meg kell osztanod a tartalmat divs és lebeg a jobbra vagy balra, majd adja meg a szélességet, a párnázást, a margót, a szegélyeket és így tovább.
De a dolgok most sokkal egyszerűbbek a CSS3 többoszlopos modul. Ahogy a név egyértelműen jelzi, ez a modul lehetővé teszi, hogy a tartalmat az újságokban vagy folyóiratokban látható oszlopos elrendezésre osztjuk.
Böngésző támogatás
Jelenleg több böngésző támogat minden böngészőt - Firefox 2+, Chrome 4+, Safari 3.1+ és Opera 11.1 - kivéve, ahogy az előre jelzett, az Internet Explorer, de a következő verzió, IE10, úgy tűnik, elkezdte támogatni ezt a modult.
A többi böngésző számára annak érdekében, hogy a Firefox mégis működjön, még mindig szüksége van erre -Moz- előtag, míg a Chrome és a Safari szükséges -webKit- előtagot. Az Opera nem igényel előtagot, így csak a hivatalos tulajdonságokat használhatjuk.
Forrás: Mikor használhatom a CSS3 többszörös oszlop elrendezést?
Több oszlop létrehozása
Mielőtt létrehoznánk az oszlopokat, készítettünk néhány szöveges bekezdést a demonstrációhoz, amelyeket a HTML5-be csomagolunk címke;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum, augue. Donec vel időbeli szín. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. //stb
… És adja meg a 600px a stíluslapról, ez az.
Most kezdjünk létrehozni az oszlopokat.
Az alábbi példában a tartalmat megosztjuk két oszlop a ... val oszlop száma ingatlan. Ez a tulajdonság megmondja a böngészőnek, hogy a megadott szám alapján oszlopokat adjon meg, és hagyja, hogy a böngésző határozza meg az egyes oszlopok megfelelő szélességét.
cikk -webkit-column-count: 2; -moz-oszlop-száma: 2; oszlop-száma: 2;
Amellett, hogy a gróf határozza meg, az oszlopok létrehozhatók a szélesség megadásával a oszlop szélesség a böngészőből, és eldönti, hogy hány oszlopot kell létrehozni a helyén.
Ebben a példában megadjuk az oszlop szélességét 150px, ami a tartalmat három oszlopra osztotta.
cikk -moz-column-width: 150px; -webkit-oszlop-szélesség: 150px; oszlop-szélesség: 150px;
Amint az a specifikációban szerepel. az oszlop tényleges szélessége a rendelkezésre álló helytől függően szélesebb vagy szűkebb lehet, mint a megadott oszlopszélesség. Továbbá, ha a szélességi érték nincs kifejezetten megadva, a “kocsi” az alapértelmezettnek tekintendő, ami azt is jelentheti “nincs oszlop”.
Távköz
Távköz határozza meg az egyes oszlopokat elválasztó tereket. A rés értékét a következőképpen lehet megadni: em vagy px, de a specifikáció szerint az érték nem lehet negatív. Az alábbi példában megadjuk a különbséget 30px, így az oszlopok közötti terek kicsit szélesebbek.
cikk -webkit-oszlop-rés: 30px; -moz-oszlop-rés: 30px; oszlop-rés: 30px;
Oszlopszabály
Ha határokat szeretne hozzáadni az oszlophoz, használhatja a oszlop-szabály tulajdonsága, amely nagyon hasonlít a határ ingatlan. Tehát, mondjuk, ha egy szaggatott szegélyt akarunk tenni az oszlop között, írhatunk;
cikk -moz-column-rule: 1px pontozott #ccc; -webkit-column-rule: 1px pontozott #ccc; oszlopszabály: 1px pontozott #ccc;
Oszlop span
Ez a tulajdonság nagyon hasonlít a colspan ban ben asztal címke. Ennek a tulajdonságnak a közös megvalósítása az, hogy a tartalom fejlécét az összes oszlopra kiterjessze. Itt van egy példa.
cikk h1 -webkit-column-span: all; oszlop-span: minden;
A fenti példában a h1 az összes oszlopban, és ha az oszlopszélesség meg van adva, 1 az alapértelmezettnek tekintendő. Sajnos ez a tulajdonság az írás idején csak az Opera és a Chrome alkalmazásban működik.
Végső szavak
Most már mindannyian eljutottunk az összes lényeges dolgon keresztül, hogy több oszlopot hozzunk létre a CSS3-mal, és ahogy már az elején említettük, ez a modul nagyon jól működik a modern böngészőkben, de még nem működik az Internet Explorerben.
Végül reméljük, hogy most már meglehetősen jó megértése van arról, hogyan hozhat létre oszlopokat a CSS3-mal, és ha van ideje a kísérletekhez, nyugodtan ossza meg módszereit és eredményeit az alábbi megjegyzések mezőben. Köszönjük, hogy elolvasta ezt a hozzászólást, és érezd jól magad.
- Demó
- Letöltés forrása
