CSS3 Columns - 强制非破坏/拆分元素？答案

【问题标题】：CSS3 Columns - Force non breaking/splitting element?CSS3 Columns - 强制非破坏/拆分元素？
【发布时间】：2015-08-03 17:14:32
【问题描述】：

我正在使用一些 CSS3 列 (column-count: 2;column-gap: 20px;) 将一些内容分成两列。在我的内容中，我有一个<p>，然后是一个<blockquote>，然后是另一个<p>。

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

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

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

你知道这是否可以实现吗？

谢谢！

【问题讨论】：

标签： css

【解决方案1】：

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

【讨论】：

这是一个非常有用的提示。谢谢你。但不幸的是，这不适用于 jQuery 列插件。也许您也偶然知道解决方法？会很有趣：welcome.totheinter.net/columnizer-jquery-plugin
如果您的列由长列表元素组成，也不起作用
另外，您需要删除元素上的所有浮点数，否则即使使用display:inline-block，它也会分裂
仅供参考，此解决方案如果您使用的是订单列表，则该解决方案不起作用。当您应用 display:inline-block; 时，它会隐藏列表项（例如数字）。
谢谢，但这不适用于 Opera。我知道，Opera 不是一个非常流行的浏览器，但仍然......

【解决方案2】：

理论上你要找的房产是……

blockquote {
  column-break-inside : avoid;
}

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

blockquote {
  display: inline-block;
}

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

【讨论】：

【解决方案3】：

只是一般性的仅供参考，以供遇到此论坛并需要 Firefox 解决方案的其他人使用。

在撰写本文时，Firefox 22.0 不支持 column-break-inside 属性，即使带有 -moz- 前缀。

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

**另外，我在使用display:inline-block; 时遇到的一个问题是，如果两个连续列表项中的文本非常短，则底部项将自行包裹起来并与上面的一项内联。

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

【讨论】：

【解决方案4】：

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

blockquote {
  break-inside: avoid-column;
}

但是在所有浏览器中这是not yet implemented，所以一个实用的解决方案是：

blockquote {
  display: inline-block;
}

【讨论】：