Колоне одлично извршавају проток и уравнотежење садржаја. Нажалост, не теку сви елементи грациозно. Понекад се елементи заглаве између стубаца.
Срећом, можете да кажете прегледачу да заједно чува одређене елементе 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 |