Csak néhány CSS-szabály segítségével olyan nyomtatási ihletésű elrendezést hozhat létre, amely az internet rugalmasságát biztosítja. Olyan, mint egy újságot venni, de ahogy a papír kisebb lesz, az oszlopok automatikusan beállítják és egyensúlyba hozzák a tartalom természetes áramlását.
.intro ( columns: 300px 2; )Az columnsingatlan elfogadja column-count, column-widthvagy mindkettő tulajdonságait.
columns: || ;Mindkét column-countés column-widthajánlott, hogy hozzon létre egy rugalmas többoszlopos elrendezést. A Will az column-countoszlopok maximális számaként fog működni, míg az column-widthegyes oszlopok minimális szélességét meghatározza. Ezeknek a tulajdonságoknak az összegyűjtésével a több oszlopos elrendezés automatikusan egyetlen oszlopra bomlik szűk böngészőszélességgel, média lekérdezések vagy egyéb szabályok nélkül.
A több oszlopos elrendezés remekül működik blokkelemeken, beleértve a listákat is, hogy rugalmasan navigálhasson.
A többoszlopos elrendezés további finomhangolásához használja break-insideaz egyes elemeket, hogy ne ragadjanak el az oszlopok között.
Több információ
- CSS többoszlopos elrendezési modul, 1. szint (Munka piszkozat)
- MDN dokumentáció
Böngésző támogatás
| AZAZ | Él | Firefox | Króm | Szafari | Opera |
|---|---|---|---|---|---|
| 10+ | Összes | 9+ | 50+ | Összes | 11.5+ |
| Android Chrome | Android Firefox | Android böngésző | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Összes | Összes | Összes | Összes | Összes |