Z le nekaj pravili CSS lahko ustvarite postavitev, ki je navdihnjena s tiskanjem in ima prilagodljivost spleta. Kot bi vzeli časopis, toda ko se papir manjša, se stolpci samodejno prilagodijo in uravnotežijo, tako da vsebina teče naravno.
.intro ( columns: 300px 2; )columnsNepremičnine bo sprejel column-count, column-widthali pa obe lastnosti.
columns: || ;Uporaba obeh column-countin column-widthje priporočljiva za ustvarjanje prilagodljive postavitve z več stolpci. Will column-countbo deloval kot največje število stolpcev, medtem ko column-widthbo narekoval najmanjšo širino vsakega stolpca. Z združevanjem teh lastnosti se postavitev več stolpcev samodejno razdeli v en stolpec pri ozkih širinah brskalnika brez potrebe po medijskih poizvedbah ali drugih pravilih.
Postavitev z več stolpci odlično deluje na blokovnih elementih, vključno s seznami, za prilagodljivo navigacijo.
Če želite še natančneje nastaviti postavitev več stolpcev, uporabite break-insideposebne elemente, da se ti ne zataknejo med stolpci.
Več informacij
- Modul postavitve CSS z več stolpci 1. stopnja (delovni osnutek)
- Dokumentacija MDN
Podpora brskalnika
| IE | Rob | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10+ | Vse | 9+ | 50+ | Vse | 11,5+ |
| Android Chrome | Android Firefox | Brskalnik Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Vse | Vse | Vse | Vse | Vse |