Rozważ następujący kod HTML:
<div class='x'>
<ul>
<li>Number one</li>
<li>Number two</li>
<li>Number three</li>
<li>Number four is a bit longer</li>
<li>Number five</li>
</ul>
</div>
oraz następujący CSS:
.x {
-moz-column-count: 3;
column-count: 3;
width: 30em;
}
W obecnej formie Firefox renderuje to podobnie do następującego:
• Number one • Number three bit longer
• Number two • Number four is a • Number five
Zauważ, że czwarty element został podzielony na drugą i trzecią kolumnę. Jak temu zapobiec?
Pożądane renderowanie może wyglądać mniej więcej tak:
• Number one • Number four is a
• Number two bit longer
• Number three • Number five
lub
• Number one • Number three • Number five
• Number two • Number four is a
bit longer
Edycja: szerokość jest określona tylko w celu zademonstrowania niechcianego renderowania. W prawdziwym przypadku oczywiście nie ma stałej szerokości.
html
css
css-multicolumn-layout
Timwi
źródło
źródło
Odpowiedzi:
Prawidłowym sposobem na to jest włamanie do właściwości CSS :
Niestety, od października 2019 r. Nie jest to obsługiwane w przeglądarce Firefox, ale jest obsługiwane przez każdą inną dużą przeglądarkę . W Chrome mogłem użyć powyższego kodu, ale nie mogłem nic zrobić dla Firefoksa ( zobacz Bug 549114 ).
Obejście, które możesz zrobić dla Firefoksa, jeśli to konieczne, polega na owinięciu niełamliwych treści w tabelę, ale jest to naprawdę, naprawdę straszne rozwiązanie, jeśli możesz tego uniknąć.
AKTUALIZACJA
Według wspomnianego wyżej raportu o błędach Firefox 20+ obsługuje
page-break-inside: avoid
jako mechanizm unikania podziałów kolumn wewnątrz elementu, ale poniższy fragment kodu pokazuje, że nadal nie działa z listami:Pokaż fragment kodu
Jak inni wspomnieć, można to zrobić
overflow: hidden
albodisplay: inline-block
ale ten usuwa kul widoczne na oryginalne pytanie. Twoje rozwiązanie będzie się różnić w zależności od twoich celów.AKTUALIZACJA 2 Ponieważ Firefox nie włącza się,
display:table
adisplay:inline-block
niezawodnym, ale nie semantycznym rozwiązaniem byłoby zawinięcie każdego elementu listy do osobnej listy i zastosowanie tam reguły stylu:źródło
break-inside: avoid-column
page-break-inside:avoid
powinien działać w FF 20.-webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;
overflow: hidden
to lepsza opcja.display: inline-block;
niestety powoduje nowe dziwactwa w Chrome.Dodawanie;
do elementów potomnych zapobiegnie ich podziałowi między kolumnami.
źródło
display:block
elementu. Prawdopodobnie będzie to na razie solidne obejście Firefoksa.<li>
ale musiałem dodać,width:100%;
aby zapobiec układaniu ich w poziomie.ustaw styl elementu, którego nie chcesz łamać:
źródło
overflow:hidden
zasada ta nie jest poprawka dla innych przepisów, to jest to, co powoduje, że układ twardą ...Od października 2014 włamanie nadal wydaje się być wadliwe w Firefoksie i IE 10-11. Jednak dodanie przepełnienia: ukrytego do elementu wraz z włamaniem: unikaj, wydaje się, że działa w Firefox i IE 10-11. Obecnie używam:
źródło
Firefox obsługuje teraz to:
Rozwiązuje to problem z podziałem elementów na kolumny.
źródło
page-break-before:
czypage-break-after:
jednak niepage-break-inside:
Akceptowana odpowiedź ma teraz dwa lata i wydaje się, że wszystko się zmieniło.
W tym artykule wyjaśniono korzystanie z
column-break-inside
właściwości. Nie mogę powiedzieć, w jaki sposób i dlaczego to się różnibreak-inside
, ponieważ tylko ta ostatnia wydaje się być udokumentowana w specyfikacji W3. Jednak Chrome i Firefox obsługują następujące funkcje:źródło
To działa dla mnie w 2015 roku:
źródło
ul
elementach, jest zamieszczona na sztuczki CSS: css-tricks.com/almanac/properties/b/break-inside i wydaje się poprawne na podstawie notatek z kompatybilnością caniuse: „Częściowe wsparcie dotyczy nie wspieraniebreak-before
,break-after
,break-inside
właściwości . Przeglądarki oparte na WebKit i Blink mają równoważne wsparcie dla niestandardowych-webkit-column-break-*
właściwości, aby osiągnąć ten sam wynik (ale tylko wartościauto
ialways
). Firefox nie obsługuje,break-*
ale obsługujepage-break-*
właściwości dla osiągnięcia tego samego wyniku. ”Poniższy kod działa, aby zapobiec łamaniu kolumn wewnątrz elementów:
źródło
W 2019 roku to działa dla mnie w Chrome, Firefox i Opera (po wielu innych nieudanych próbach):
źródło
Wydaje się, że Firefox 26 wymaga
I potrzebuje Chrome 32
źródło
Myślę, że miałem ten sam problem i znalazłem rozwiązanie w tym:
Działa również w FF 38.0.5: http://jsfiddle.net/rkzj8qnv/
źródło
Możliwym obejściem dla Firefoksa jest ustawienie właściwości CSS „display” elementu, w którym nie chcesz mieć przerwy, na „table”. Nie wiem, czy to działa dla tagu LI (prawdopodobnie stracisz styl listy -item), ale działa dla tagu P.
źródło
Właśnie naprawiłem niektóre
div
s, które dzieliły się na następną kolumnę, dodającdla dziecka
div
s.* Zrozumiałem, że to naprawia tylko w Firefoksie!
źródło
Napotkałem ten sam problem podczas korzystania z kolumn kart
naprawiłem to za pomocą
źródło
działa świetnie
źródło
Dokonałem aktualizacji faktycznej odpowiedzi.
Wydaje się, że działa to na Firefox i Chrome: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/
Uwaga: Właściwość float wydaje się być tą, która powoduje zachowanie bloku.
źródło
Ta odpowiedź może dotyczyć tylko niektórych okoliczności; Jeśli ustawisz wysokość swoich elementów, będzie to zgodne ze stylem kolumny. Tam utrzymując wszystko, co jest zawarte na tej wysokości, w jednym rzędzie.
Miałem listę, taką jak operacja, ale zawierała dwa elementy, elementy i przyciski do działania na te elementy. Traktowałem go jak stół
<ul> - table
,<li> - table-row
,<div> - table-cell
umieścić UL w układzie 4 kolumny. Czasami kolumny były dzielone między przedmiot a przyciski. Sztuczka, której użyłem, polegała na nadaniu elementom Div wysokości linii pokrywającej przyciski.źródło