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

Question

我正在使用一些CSS3列(column-count: 2;column-gap: 20px;)将一些内容拆分为两列.在我的内容中,我有一个<p>,然后是a <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

根据MDN，正确的解决方案是

blockquote {
  break-inside: avoid-column;
}

然而，这尚未在所有浏览器中实现，因此实用的解决方案是：

blockquote {
  display: inline-block;
}

Answer 4

对于那些进入这个论坛并需要Firefox解决方案的其他人来说,只是一般的FYI.

在写这篇文章时,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/