В оформление с няколко колони можете да накарате елементите да се разширят в колоните с column-span.
h2 ( -webkit-column-span: all; column-span: all; )Присвояване column-spanна елемент вътре в многоколонното оформление, за да стане обхващащ елемент. Оформлението с няколко колони ще се възобнови със следващия необхващащ елемент.
Стойността на column-spanможе да бъде allили none.
Задайте елемент с, column-span: allза да го накарате да обхваща колоните.
Стойността noneза свойството е ключът за убиване за обхващащ елемент. Можете да използвате това, когато работите с медийни заявки, за да кажете на обхващащия елемент да спре да обхваща.
Вижте примера за размах на колона Pen от CSS-Tricks (@ css-tricks) на CodePen.
Поддръжка на браузър
Firefox не поддържа това column-span, но има интересни решения.
Ето поддръжката за оформление на няколко колони като цяло:
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Не забравяйте вашите префикси!