Как предотвратить разрыв столбца внутри элемента? - PullRequest
Новая
       25

Как предотвратить разрыв столбца внутри элемента?

242 голосов
/ 16 октября 2011

Рассмотрим следующий 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>

и следующий CSS: 

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

В нынешнем виде Firefox отображает это аналогично следующему: 

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

Обратите внимание, что четвертый элемент был разделен между вторым и третьим столбцом.Как мне предотвратить это?

Требуемый рендеринг может выглядеть примерно так: 

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

или 

• Number one    • Number three        • Number five
• Number two    • Number four is a
                  bit longer

Редактировать: Ширинауказывается только для демонстрации нежелательного рендеринга.В реальном случае, конечно, нет фиксированной ширины.

Ответы [ 17 ]

1 голос
/ 05 сентября 2018 
<style>
ul li{display: table;}  
</style>

отлично работает

1 голос
/ 07 июня 2018

Я столкнулся с той же проблемой при использовании столбцов карт

Я исправил это с помощью 

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;
1 голос
/ 01 июля 2015

У меня была та же проблема, я думаю, и нашел решение в этом: 

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;

Работает также в FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

1 голос
/ 01 февраля 2015

Я только что исправил несколько div с, которые разбивались на следующий столбец, добавив 

overflow: auto

ребенку div с.

* Понял, что это только исправляет в Firefox!

1 голос
/ 10 марта 2012

Возможный обходной путь для Firefox состоит в том, чтобы установить свойство CSS «отображение» элемента, для которого вы не хотите делать разрыв внутри, в «таблицу».Я не знаю, работает ли он для тега LI (вы, вероятно, потеряете стиль списка -item), но он работает для тега P.

0 голосов
/ 23 июня 2015

Этот ответ может относиться только к определенным обстоятельствам; Если вы установите высоту для своих элементов, это будет выполнено в соответствии со стилем столбца. Таким образом, сохраняя все, что содержится в пределах этой высоты, в ряд.

У меня был список, как в операторе, но он содержал два элемента, элементы и кнопки, чтобы воздействовать на эти элементы. Я рассматривал это как таблицу <ul> - table, <li> - table-row, <div> - table-cell, поместив UL в макет из 4 столбцов. Столбцы иногда делятся между элементом и его кнопками. Хитрость, которую я использовал, заключалась в том, чтобы придать элементам Div высоту строки для кнопок.

0 голосов
/ 23 марта 2014

Я сделал обновление фактического ответа.

Это похоже на работу с Firefox и Chrome: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

Примечание: The свойство float , по-видимому, определяет поведение блока.

Страница:
...