Naudodamiesi tik keliomis CSS taisyklėmis, galite sukurti spausdinimo įkvėptą maketą, kuris būtų lankstus žiniatinklyje. Tai panašu į laikraščio paėmimą, tačiau popieriui mažėjant, stulpeliai automatiškai sureguliuos ir subalansuos, kad turinys galėtų tekėti natūraliai.
.intro ( columns: 300px 2; )columnsNuosavybė priims column-count, column-widtharba abu savybės.
columns: || ;Naudojant abi column-countir column-widthrekomenduojama sukurti lankstų kelių stulpelių išdėstymą. column-countVeiks kaip maksimalų skaičių stulpelių, o column-widthdiktuoja minimalų plotį kiekviename stulpelyje. Sujungus šias ypatybes, kelių stulpelių išdėstymas automatiškai suskaidomas į vieną stulpelį siauru naršyklės pločiu, nereikalaujant medijos užklausų ar kitų taisyklių.
Kelių stulpelių išdėstymas puikiai tinka blokų elementams, įskaitant sąrašus, kad būtų galima lanksčiai naršyti.
Jei norite dar tikslinti kelių stulpelių išdėstymą, naudokite break-insidetam tikrus elementus, kad jie neįstrigtų tarp stulpelių.
Daugiau informacijos
- CSS kelių stulpelių išdėstymo modulio 1 lygis (darbinis juodraštis)
- MDN dokumentacija
Naršyklės palaikymas
| T.Y | Briauna | „Firefox“ | „Chrome“ | „Safari“ | Opera |
|---|---|---|---|---|---|
| 10+ | Viskas | 9+ | 50+ | Viskas | 11,5+ |
| „Android Chrome“ | „Android Firefox“ | „Android“ naršyklė | „iOS Safari“ | „Opera Mobile“ |
|---|---|---|---|---|
| Viskas | Viskas | Viskas | Viskas | Viskas |