Stupci izvrsno rade protok i uravnoteženje sadržaja. Nažalost, ne teku svi elementi elegantno. Ponekad se elementi zaglave između stupaca.
Srećom, možete reći pregledniku da zadrži određene elemente zajedno s break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Trenutno svojstvo univerzalno prihvaća vrijednosti autoi avoid.
Koristite avoidna elementu u rasporedu s više stupaca kako se svojstvo ne bi raspadalo.
Još jednom pogledajte sintaksu ovog svojstva jer postoje neke varijacije među preglednicima.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Svojstvo uzima svojstva nakon preloma stranice i dijeli iste vrijednosti. Za sada Firefox koristi page-break-inside.
Pogledajte primjer razbijanja stupca Pen (CSS-trikovi) Katy DeCorah (@katydecorah) na CodePenu.
Podrška preglednika
Svojstva prijeloma stranice:
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Podrška za raspored više stupaca:
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |