Колоне одлично извршавају проток и уравнотежење садржаја. Нажалост, не теку сви елементи грациозно. Понекад се елементи заглаве између стубаца.


Срећом, можете да кажете прегледачу да заједно чува одређене елементе 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+ */
Својство узима својства након прелома странице и дели исте вредности. За сада Фирефок користи page-break-inside
.
Погледајте пример прелома ступца Пен (ЦСС-трикови) Кати ДеЦорах (@катидецорах) на ЦодеПен-у.
Подршка прегледача
Својства прелома странице:
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
Хром | Фирефок | ИЕ | Ивица | Сафари |
---|---|---|---|---|
91 | 87 | 11 | 88 | ТП |
Мобиле / Таблет
Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
---|---|---|---|
88 | 85 | 81 | 14.0-14.4 |
Подршка за распоред више колона:
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
Хром | Фирефок | ИЕ | Ивица | Сафари |
---|---|---|---|---|
91 | 87 | 10 | 12 | 10 |
Мобиле / Таблет
Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
---|---|---|---|
88 | 85 | 81 | 10.0-10.2 |