Kolumny świetnie sobie radzą z przepływem i równoważeniem treści. Niestety nie wszystkie elementy płyną wdzięcznie. Czasami elementy blokują się między kolumnami.
Na szczęście możesz powiedzieć przeglądarce, aby zachowała razem określone elementy break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )W tej chwili nieruchomość powszechnie przyjmuje wartości autoi avoid.
Użyj avoidna elemencie w układzie wielokolumnowym, aby zapobiec rozpadowi właściwości.
Przyjrzyj się dodatkowo składni tej właściwości, ponieważ istnieją pewne różnice między przeglądarkami.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Właściwość przyjmuje po właściwościach podziału strony i ma te same wartości. Na razie Firefox używa page-break-inside.
Zobacz przykład włamania do kolumny Pen (CSS-Tricks) autorstwa Katy DeCorah (@katydecorah) na CodePen.
Wsparcie przeglądarki
Właściwości podziału strony:
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Obsługa układu wielokolumnowego:
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |