Veerud teevad sisu voolamise ja tasakaalustamise suurepärase töö. Kahjuks ei voola kõik elemendid graatsiliselt. Mõnikord jäävad elemendid veergude vahele kinni.
Õnneks võite brauserile öelda, et hoidke koos spetsiifilisi elemente break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Praegu aktsepteerib vara universaalselt väärtusi autoja avoid.
Kasutage avoidmitmeveerulises paigutuses olevat elementi, et hoida vara lõhkumast.
Vaadake selle atribuudi süntaksit täiendavalt, kuna brauserites on mõningaid erinevusi.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Atribuut võtab pärast lehelõike omadusi ja jagab samu väärtusi. Praegu kasutab Firefox page-break-inside.
Vaadake Katy DeCorahi (@katydecorah) CodePenilt veeru Pliiats sisselülitamise näidet (CSS-trikid).
Brauseri tugi
Leheküljevahe omadused:
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0–14,4 |
Mitme veeruga paigutuse tugi:
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |