Columns zijn uitstekend in het laten vloeien en balanceren van inhoud. Helaas stromen niet alle elementen gracieus. Soms komen elementen vast te zitten tussen kolommen.
Gelukkig kun je de browser vertellen om specifieke elementen bij elkaar te houden break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Op dit moment accepteert de eigenschap universeel de waarden autoen avoid.
Gebruik avoidop een element in een lay-out met meerdere kolommen om te voorkomen dat de eigenschap uit elkaar valt.
Kijk nog eens goed naar de syntaxis voor deze eigenschap, aangezien er enige variatie is tussen de browsers.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */De eigenschap neemt de eigenschappen van het pagina-einde over en deelt dezelfde waarden. Voorlopig gebruikt Firefox page-break-inside.
Zie het voorbeeld van de Pen column break-inside (CSS-Tricks) door Katy DeCorah (@katydecorah) op CodePen.
Browser-ondersteuning
Eigenschappen pagina-einde:
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Ondersteuning voor lay-out met meerdere kolommen:
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |