Stolpci odlično opravijo pretok in uravnoteženje vsebine. Na žalost vsi elementi ne tečejo elegantno. Včasih se elementi zataknejo med stolpci.
Na srečo lahko brskalniku naročite, naj obdrži določene elemente break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Trenutno nepremičnina univerzalno sprejema vrednote autoin avoid.
Uporabite avoidna elementu v postavitvi z več stolpci, da se lastnost ne razbije.
Še enkrat si oglejte sintakso te lastnosti, saj obstajajo razlike med brskalniki.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Lastnost vzame lastnosti po prelomu strani in si deli iste vrednosti. Za zdaj Firefox uporablja page-break-inside.
Oglejte si primer preloma stolpca Pen (CSS-triki) Katy DeCorah (@katydecorah) na CodePen.
Podpora za brskalnik
Lastnosti preloma strani:
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 91 | 87 | 11. | 88 | TP |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Podpora za postavitev več stolpcev:
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 91 | 87 | 10. | 12. | 10. |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |