Stulpeliai puikiai atlieka turinio srautą ir subalansavimą. Deja, ne visi elementai teka grakščiai. Kartais elementai įstringa tarp stulpelių.
Laimei, galite nurodyti naršyklei saugoti konkrečius elementus break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Šiuo metu nuosavybė visuotinai priima vertybes autoir avoid.
Naudokite avoidelementą, esantį kelių stulpelių išdėstyme, kad nuosavybė nesuskiltų.
Pažvelkite dar kartą į šios nuosavybės sintaksę, nes naršyklėse yra tam tikrų skirtumų.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Po puslapio pertraukos ypatybės užima tas pačias reikšmes. Kol kas „Firefox“ naudoja page-break-inside.
Žr. Katy DeCorah (@katydecorah) „Pen“ skiltyje pateiktą „Pen“ stulpelio įterpimo pavyzdį (CSS-Tricks) „CodePen“.
Naršyklės palaikymas
Puslapio pertraukimo savybės:
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 14,0–14,4 |
Kelių stulpelių išdėstymo palaikymas:
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |