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