Sarakkeet tekevät hienoa työtä sisällön virtaamiseksi ja tasapainottamiseksi. Valitettavasti kaikki elementit eivät virtaa sulavasti. Joskus elementit juuttuvat sarakkeiden väliin.
Onneksi voit kertoa selaimen pitää tiettyjä elementtejä yhdessä break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Tällä hetkellä kiinteistö hyväksyy yleisesti arvot autoja avoid.
Käytä avoidominaisuutta monisarakkeisessa asettelussa, jotta ominaisuus ei hajoa.
Katso vielä yksi lisäominaisuus tämän ominaisuuden syntaksista, koska selaimissa on eroja.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Ominaisuus ottaa sivunvaihdon jälkeen ominaisuudet ja jakaa samat arvot. Toistaiseksi Firefox käyttää page-break-inside.
Katso Katy DeCorahin (@katydecorah) kynän sarakkeen sisäosan esimerkki (CSS-temput) CodePenistä.
Selaimen tuki
Sivunvaihdon ominaisuudet:
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0 - 14,4 |
Usean sarakkeen asettelun tuki:
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |