CSS3列 – 强制非破/分裂元素？
我使用一些CSS3列（ column-count: 2;column-gap: 20px; ）将一些内容分成两列。 在我的内容中，我有一个<p> ，然后是<blockquote> ，然后是另一个<p> 。
我的问题：有没有办法阻止我的<blockquote> （或任何其他指定的元素）分裂成两列？
例如，目前我的<blockquote>部分在第1列，部分在第2列。
理想情况下，我想这样做是因为<blockquote>保留在第1列或第2列中。
任何想法，如果这可以实现？
谢谢！
添加display:inline-block; 到你想防止分裂的物品。
理论上你正在寻找的财产是…
blockquote { column-break-inside : avoid; }
但是，上次我检查它没有在Webkit中正确实施，不知道关于Firefox。 我有更多的运气：
blockquote { display: inline-block; }
由于渲染器将其视为图像，不会在列之间打破。
只是一般FYI为其他碰到这个论坛，需要一个Firefox的解决scheme。
在写这个的时候，即使使用-moz-前缀，Firefox 22.0也不支持column-break-inside属性。
但解决scheme很简单：只需使用display:table; 。 你也可以做** display:inline-block; 这些解决scheme的问题是列表项将失去其列表样式项目或项目符号图标。
**另外，我遇到的一个问题是display:inline-block; 如果两个连续列表项中的文本非常短，那么最下面的项目将自行包装并与上面的项目内联。
display:table; 是两个解决scheme中最差的。
更多信息： http : //trentwalton.com/2012/02/13/css-column-breaks/
根据MDN ，正确的解决scheme是
blockquote { break-inside: avoid-column; }
但是，这在所有的浏览器中都没有实现 ，所以一个实际的解决scheme是：
blockquote { display: inline-block; }
