Столбцы CSS3 - принудительно не разбивать/разбивать элемент?

Я использую некоторые столбцы CSS3 (column-count: 2;column-gap: 20px;), чтобы разделить содержимое на два столбца. В моем содержании у меня есть <p>, за ним следует <blockquote>, а затем еще <p>.

Мой вопрос: существует ли способ предотвратить разделение моего <blockquote> (или любого другого указанного элемента) на два столбца?

Например, в настоящее время мой <blockquote> частично находится в столбце 1 и частично в столбце 2.

В идеале я хотел бы сделать так, чтобы <blockquote> оставался вместе в столбцах 1 или 2.

Любая идея, если это может быть достигнуто?

Спасибо!

Ответ 1

Добавьте display:inline-block; к элементу, который вы хотите предотвратить от разделения.

Ответ 2

В теории свойство, которое вы ищете,...

blockquote {
  column-break-inside : avoid;
}

Однако в прошлый раз, когда я проверил, он не был правильно реализован в Webkit, не знаю об Firefox. Мне повезло больше:

blockquote {
  display: inline-block;
}

Поскольку рендеринг рассматривает это как изображение и не разбивает его среди столбцов.

Ответ 3

Просто общий FYI для других, которые сталкиваются с этим форумом и нуждаются в решении для Firefox.

В настоящее время Firefox 22.0 не поддерживает свойство column-break-inside даже с префиксом -moz-.

Но решение довольно просто: просто используйте display:table;. Вы также можете сделать ** display:inline-block; Проблема с этими решениями заключается в том, что элементы списка потеряют свой элемент стиля списка или значок пули.

** Кроме того, одна проблема, с которой я столкнулась с display:inline-block;, заключается в том, что если текст в двух последовательных элементах списка очень короткий, нижний элемент будет завершаться и встраиваться в один из них над ним.

display:table; является наименее худшим из обоих решений.

Дополнительная информация здесь: http://trentwalton.com/2012/02/13/css-column-breaks/

Ответ 4

Согласно MDN, правильное решение

blockquote {
  break-inside: avoid-column;
}

Однако это еще не реализовано во всех браузерах, поэтому практическое решение:

blockquote {
  display: inline-block;
}