CSS3列 - 非强制破/分离元件?

我使用了一些CSS3列( column-count: 2;column-gap: 20px; )的一些内容分成两列。 在我的内容我有一个<p>随后<blockquote>紧接着又<p>

我的问题:是否有预防的方法我<blockquote>或任何其他特定元素)从分裂成两列?

例如,目前我<blockquote>部分位于第1列,并部分地在第2列。

CSS3列 - 非强制破/分离元件?

理想情况下,我想使它所以<blockquote>留在一起或者列1或2。

CSS3列 - 非强制破/分离元件?

任何想法,如果可以做到这一点?

谢谢!

--------------解决方案-------------

添加display:inline-block;该项目要从分裂防范。

从理论上讲,你正在寻找的属性...

blockquote {
column-break-inside : avoid;
}

不过,我最后一次检查它没有正确WebKit中,不知道关于Firefox实现。 我有更多的运气:

blockquote {
display: inline-block;
}

作为渲染器将其视为一个图像和列中不破它。

只是一般为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/

根据MDN,正确的解决方案

blockquote {
break-inside: avoid-column;
}

然而这还不是所有的浏览器实现的,所以一个实用的解决方案是:

blockquote {
display: inline-block;
}

分类:CSS 时间:2012-01-04 人气:192
本文关键词: CSS,CSS3
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.294 (s). 9 q(s)