Колоните вършат чудесна работа с поточно и балансиращо съдържание. За съжаление не всички елементи текат грациозно. Понякога елементи се забиват между колони.
За щастие можете да кажете на браузъра да съхранява конкретни елементи заедно break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )В момента имотът универсално приема ценностите autoи avoid.
Използвайте avoidвърху елемент в многоколонно оформление, за да предотвратите разпадането на свойството.
Погледнете допълнително синтаксиса на това свойство, тъй като има някои вариации сред браузърите.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Свойството взема след прекъсването на страницата свойства и споделя същите стойности. Засега Firefox използва page-break-inside.
Вижте примера за разбиване на колона Pen (CSS-трикове) от Katy DeCorah (@katydecorah) в CodePen.
Поддръжка на браузър
Свойства за прекъсване на страницата:
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 91 | 87 | 11. | 88 | TP |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Поддръжка на оформление с няколко колони:
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |