Vairāku kolonnu izkārtojumā jūs varat likt elementiem izvērsties kolonnās ar column-span.
h2 ( -webkit-column-span: all; column-span: all; )Piešķiriet column-spanelementam vairāku kolonnu izkārtojuma iekšpusē, lai tas kļūtu par aptverošu elementu. Vairāku kolonnu izkārtojums tiks atsākts ar nākamo elementu, kas nav paredzēts.
Vērtība column-spanvar būt allvai none.
Iestatiet elementu ar column-span: all, lai tas aptvertu kolonnas.
Īpašuma vērtība noneir pārslēdzošā elementa slēdzis. To var izmantot, strādājot ar multivides vaicājumiem, lai norādītu aptverošajam elementam pārtraukt izplatīšanos.
Skatiet CSS-Tricks (@ css-tricks) kolonnu diapazona Pen piemēru vietnē CodePen.
Pārlūka atbalsts
Firefox to neatbalsta column-span, taču ir interesanti risinājumi.
Lai gan kopumā ir atbalstīts vairāku kolonnu izkārtojums:
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 10.0-10.2 |
Neaizmirstiet savus priedēkļus!
