CSS3列 - 强制非破坏/分裂元素？

Question

我使用一些CSS3列（column-count: 2;column-gap: 20px;）将一些内容拆分为两列。在我的内容中，我有<p>，后跟<blockquote>，后跟另一个<p>。

我的问题：有没有办法阻止我的<blockquote>（或任何其他指定元素）分成两列？

例如，目前我的<blockquote>部分位于第1列，部分位于第2列。

理想情况下，我希望将<blockquote>保留在第1列或第2列中。

是否可以实现这一点？

谢谢！

Answer 1

将display:inline-block;添加到要阻止拆分的项目中。

Answer 2

理论上，您正在寻找的属性是......

blockquote {
  column-break-inside : avoid;
}

但是，上次我检查它在Webkit中没有正确实现，不知道firefox。我有更多运气：

blockquote {
  display: inline-block;
}

由于渲染器将其视为图像，并且不会在列之间将其分解。

Answer 3

对于那些碰到这个论坛并且需要Firefox解决方案的人来说，只是一般的FYI。

目前，即使使用column-break-inside前缀，Firefox 22.0也不支持-moz-属性。

但解决方案很简单：只需使用display:table;即可。您也可以** display:inline-block;这些解决方案的问题是列表项将丢失其列表样式项或项目符号图标。

**此外，我在display:inline-block;遇到的一个问题是，如果两个连续列表项中的文本非常短，则底部项目将自行换行并与其上方的文本内联。

display:table;是两种解决方案中最差的。

此处有更多信息：http://trentwalton.com/2012/02/13/css-column-breaks/

Answer 4

According to MDN，正确的解决方案是

blockquote {
  break-inside: avoid-column;
}

但是在所有浏览器中都是not yet implemented，因此实际的解决方案是：

blockquote {
  display: inline-block;
}