Kolonner gjør en god jobb med å flyte og balansere innhold. Dessverre flyter ikke alle elementene elegant. Noen ganger setter elementer fast mellom kolonnene.
Heldigvis kan du be nettleseren om å holde spesifikke elementer sammen med break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )For øyeblikket aksepterer eiendommen universelt verdiene autoog avoid.
Bruk avoidpå et element i en flerkolonnelayout for å hindre at eiendommen brytes fra hverandre.
Ta en ekstra titt på syntaksen for denne egenskapen, da det er litt variasjon blant nettleserne.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Eiendommen tar egenskaper etter sideskift og deler de samme verdiene. For nå bruker Firefox page-break-inside.
Se eksemplet på Pen-kolonneinnbrudd (CSS-Tricks) av Katy DeCorah (@katydecorah) på CodePen.
Nettleserstøtte
Egenskaper for sideskift:
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Støtte for layout med flere kolonner:
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |