Lajur berfungsi dengan baik untuk mengalirkan dan menyeimbangkan kandungan. Malangnya, tidak semua elemen mengalir dengan baik. Kadang kala elemen tersekat di antara lajur.
Nasib baik, anda boleh memberitahu penyemak imbas untuk menyimpan elemen tertentu break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Pada masa ini, harta tersebut secara universal menerima nilai autodan avoid.
Gunakan avoidpada elemen dalam susun atur berbilang lajur untuk mengelakkan harta benda pecah.
Lihatlah sintaks untuk harta tanah ini kerana terdapat beberapa variasi antara penyemak imbas.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Properti tersebut diambil setelah hartanah pecah halaman dan berkongsi nilai yang sama. Buat masa ini, Firefox menggunakan page-break-inside.
Lihat contoh penembusan lajur Pen (CSS-Tricks) oleh Katy DeCorah (@katydecorah) di CodePen.
Sokongan Penyemak Imbas
Hartanah pemecahan halaman:
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Sokongan susun atur berbilang lajur:
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |