Провала - ЦСС-трикови

Anonim

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

Срећом, можете да кажете прегледачу да заједно чува одређене елементе 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