Kelių stulpelių išdėstyme galite priversti elementus išplėsti stulpelius naudodami column-span.
h2 ( -webkit-column-span: all; column-span: all; )Priskirkite column-spanelementą, esantį kelių stulpelių išdėstymo viduje, kad jis taptų išplėstiniu elementu. Kelių stulpelių išdėstymas bus atnaujintas su kitu elementu, kuris nebus įtrauktas.
Vertė column-spangali būti allarba none.
Nustatykite elementą naudodami column-span: all, kad jis apimtų stulpelius.
Nuosavybės vertė noneyra užfiksuoto elemento jungiklis. Tai galite naudoti dirbdami su daugialypės terpės užklausomis, kad nurodytumėte išplėstiniam elementui sustabdyti skleidimą.
Žr. „CSS-Tricks“ (@ css-tricks) „Pen“ stulpelių ilgio pavyzdį „CodePen“.
Naršyklės palaikymas
„Firefox “ to nepalaiko column-span, tačiau yra įdomių problemų.
Vis dėlto yra kelių stulpelių išdėstymo palaikymas:
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Nepamirškite priešdėlių!