Cu doar câteva reguli CSS, puteți crea un aspect inspirat de tipărire, care să aibă flexibilitatea webului. Este ca și cum ai lua un ziar, dar pe măsură ce hârtia devine mai mică, coloanele se vor regla și echilibra automat, permițând conținutul să curgă natural.
.intro ( columns: 300px 2; )columnsProprietatea va accepta column-count, column-widthsau ambele proprietăți.
columns: || ;Folosind ambele column-countși column-widtheste recomandat pentru a crea un aspect flexibil în mai multe coloane. column-countVa acționa ca numărul maxim de coloane, în timp ce column-widthva dicta lățimea minimă pentru fiecare coloană. Tragând aceste proprietăți împreună, aspectul cu mai multe coloane se va descompune automat într-o singură coloană la lățimi înguste ale browserului, fără a fi nevoie de interogări media sau alte reguli.
Un aspect cu mai multe coloane funcționează excelent pe elemente de bloc, inclusiv liste pentru a face o navigare flexibilă.
Pentru a regla în continuare aspectul dvs. cu mai multe coloane, utilizați break-insidepe anumite elemente pentru a le împiedica să se blocheze între coloane.
Mai multe informatii
- CSS Multi-column Layout Module Level 1 (Working Draft)
- Documentare MDN
Suport pentru browser
| IE | Margine | Firefox | Crom | Safari | Operă |
|---|---|---|---|---|---|
| Peste 10 ani | Toate | 9+ | Peste 50 de ani | Toate | 11.5+ |
| Android Chrome | Android Firefox | Browser Android | Safari iOS | Opera Mobile |
|---|---|---|---|---|
| Toate | Toate | Toate | Toate | Toate |