Kolonnas lieliski paveic satura plūsmu un līdzsvarošanu. Diemžēl ne visi elementi plūst graciozi. Dažreiz elementi iestrēgst starp kolonnām.
Par laimi, jūs varat pateikt pārlūkprogrammai saglabāt konkrētus elementus kopā ar break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Šobrīd īpašums vispārpieņem vērtības autoun avoid.
Izmantojiet avoidelementu vairāku kolonnu izkārtojumā, lai īpašums nesadalītos.
Apskatiet vēl vienu šī īpašuma sintaksi, jo pārlūkprogrammās ir dažas atšķirības.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Īpašums ņem pēc lapas pārtraukuma rekvizītus un kopējās vērtības. Pagaidām Firefox izmanto page-break-inside.
Skatiet Katy DeCorah (@katydecorah) pildspalvas kolonnu ielaušanās piemēru (CSS-triki) vietnē CodePen.
Pārlūka atbalsts
Lapas pārtraukuma īpašības:
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 14.0-14.4 |
Vairāku kolonnu izkārtojuma atbalsts:
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 10.0-10.2 |