Kolonner gør et godt stykke arbejde med at flyde og balancere indhold. Desværre flyder ikke alle elementer yndefuldt. Nogle gange sidder elementer fast mellem kolonnerne.
Heldigvis kan du bede browseren om at holde bestemte elementer sammen med break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )I øjeblikket accepterer ejendommen universelt værdierne autoog avoid.
Brug avoidpå et element i et layout med flere kolonner for at forhindre egenskaben i at bryde fra hinanden.
Se et ekstra kig på syntaksen for denne egenskab, da der er en vis variation blandt browserne.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Ejendommen tager egenskaber efter sideskift og deler de samme værdier. For nu bruger Firefox page-break-inside.
Se eksemplet med Pen-kolonneindbrydning (CSS-Tricks) af Katy DeCorah (@katydecorah) på CodePen.
Browsersupport
Egenskaber for sideskift:
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Understøttelse af layout med flere søjler:
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |