Ответ 1
Добавьте display:inline-block; к элементу, который вы хотите предотвратить от разделения.
Столбцы CSS3 - принудительно не разбивать/разбивать элемент?
Я использую некоторые столбцы CSS3 (column-count: 2;column-gap: 20px;), чтобы разделить содержимое на два столбца. В моем содержании у меня есть <p>, за ним следует <blockquote>, а затем еще <p>.
Мой вопрос: существует ли способ предотвратить разделение моего <blockquote> (или любого другого указанного элемента) на два столбца?
Например, в настоящее время мой <blockquote> частично находится в столбце 1 и частично в столбце 2.
В идеале я хотел бы сделать так, чтобы <blockquote> оставался вместе в столбцах 1 или 2.
Любая идея, если это может быть достигнуто?
Спасибо!
Ответы
Ответ 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;
}