Столбцы отлично справляются с задачей распределения и балансировки контента. К сожалению, не все элементы плавно перетекают. Иногда элементы застревают между столбцами.
К счастью, вы можете указать браузеру сохранять определенные элементы вместе с 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-Tricks) от Кэти ДеКора (@katydecorah) на CodePen.
Поддержка браузера
Свойства разрыва страницы:
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 14,0-14,4 |
Поддержка макета с несколькими столбцами:
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 10,0-10,2 |