CSS3柱-强制非破坏/分裂元件?

CSS3柱-强制非破坏/分裂元件?,css,Css,我使用一些CSS3列(列计数:2;列间距:20px;)将一些内容拆分为两列。在我的内容中,我有一个,后面是一个,后面是另一个 我的问题:有没有办法防止我的(或任何其他指定元素)拆分为两列 例如,当前我的部分位于第1列,部分位于第2列 理想情况下,我希望使保持在第1列或第2列中 你知道这能否实现吗 谢谢 添加显示:内联块到要防止拆分的项。理论上,您要查找的属性是 blockquote { column-break-inside : avoid; } 然而,上次我检查它没有在Webkit中

我使用一些CSS3列(
列计数:2;列间距:20px;
)将一些内容拆分为两列。在我的内容中,我有一个
,后面是一个
,后面是另一个

我的问题:有没有办法防止我的
(或任何其他指定元素)拆分为两列

例如,当前我的
部分位于第1列,部分位于第2列

理想情况下,我希望使
保持在第1列或第2列中

你知道这能否实现吗


谢谢

添加
显示:内联块到要防止拆分的项。

理论上,您要查找的属性是

blockquote {
  column-break-inside : avoid;
}
然而,上次我检查它没有在Webkit中正确实现,对firefox一无所知。我更幸运的是:

blockquote {
  display: inline-block;
}

因为渲染器将其视为一个图像,并且不会在列之间打断它。

对于其他偶遇此论坛并需要Firefox解决方案的用户,请提供一般参考

在撰写本文时,Firefox 22.0不支持
column break inside
属性,即使前缀为
-moz-

但解决方案非常简单:只需使用
display:table。您还可以执行**
显示:内联块这些解决方案的问题是列表项将丢失其列表样式项或项目符号图标

**另外,我在
display中遇到的一个问题是:内联块是指,如果两个连续列表项中的文本非常短,则底部的项将自动换行并与上面的项内联

显示:表格是两种解决方案中最差的

更多信息请点击此处:

,正确的解决方案是

blockquote {
  break-inside: avoid-column;
}
但是,这在所有浏览器中都存在,因此一个实用的解决方案是:

blockquote {
  display: inline-block;
}

这是一个非常有用的提示。非常感谢。但不幸的是,jquerycolumns插件无法实现这一点。也许你也碰巧知道解决这个问题的方法?这将非常有趣:如果列由长列表元素组成,也不起作用。因此,您需要删除元素上的所有浮动,否则即使使用
display:inline block
FYI,该解决方案也不起作用,如果您使用订单列表。应用
显示时:内联块它隐藏列表项(例如数字)。谢谢,但这不适用于Opera。我知道,Opera不是一个非常流行的浏览器,但仍然…在带有-webkit-prefix的webkit中工作。