Az oszlopok nagyszerű munkát végeznek a tartalom áramlásában és kiegyensúlyozásában. Sajnos nem minden elem folyik kecsesen. Néha az elemek beszorulnak az oszlopok közé.
Szerencsére megmondhatja a böngészőnek, hogy bizonyos elemeket tartson együtt break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Jelenleg a tulajdonság univerzálisan elfogadja az értékeket autoés avoid.
Használja avoidegy elemet egy több oszlopos elrendezésen belül, hogy a tulajdonság ne törjön szét.
Vessen még egy pillantást a tulajdonság szintaxisára, mivel a böngészők között van némi eltérés.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */A tulajdonság az oldaltörés tulajdonságait követi, és ugyanazokat az értékeket osztja meg. Egyelőre a Firefox használja page-break-inside.
Lásd Katy DeCorah (@katydecorah) Pen oszlop áttekintő példáját (CSS-trükkök) a CodePen-en.
Böngésző támogatás
Oldaltörési tulajdonságok:
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 91. | 87 | 11. | 88 | TP |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 14,0–14,4 |
Több oszlopos elrendezés támogatása:
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 91. | 87 | 10. | 12. | 10. |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 10.0-10.2 |