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 人气:227
本文关键词: CSS,CSS3
分享到:

相关文章

  • 有人可以帮助我知道我可以在小屏幕我布置工作使用CSS,CSS3做什么呢? 2014-12-23

    我有我想让它为小屏幕设备运行的一个简单的布局http://goo.gl/BgaiB. 我想知道如何页可以被设置为根据屏幕大小自动调整大小. 有人可以帮助我,我怎么能做到这一点. 问候, --------------解决方案------------- 媒体查询是你想要的,这里有一个很好的概述: 这听起来像你想使用一些响应的网页设计技术,基于设备的屏幕宽度有布局的变化. 媒体查询是如何可以做到这一点,本文是了解这项技术一个很好的起点. 使用媒体查询应该为你做的工作. 搜索.

  • W3C的CSS验证结果“值错误:font-family属性FONT-FAMILY不CSS水平2.1存在,但存在于[CSS1,CSS2,CSS3]:黑体” 2013-06-15

    我得到的W3 CSS validtor两个错误的 值错误:font-family属性FONT-FAMILY不CSS水平2.1存在,但在[CSS1,CSS2,CSS3]存在:黑体 SRC属性不存在:网址('tl_files / Helvetica.ttf')格式("TrueType字体") 我的这些代码,CSS是\ @font-face{font-family:Helvetica;src: url('tl_files/Helvetica.ttf') format("truety

  • 列使用CSS,而无需使用多个div的? 2012-01-31

    我想获得4列,与漂浮在所有的文字. 我不想让4个独立的div S,因为当如果全文的第一列,文本应继续在下一列. 我也想设置每列的宽度和之间的填充. 此外,高度应该是灵活的,这取决于有多少文字是有的. 你有什么想法? --------------解决方案------------- 这篇文章(11经典CSS技术狂简单,CSS3)展示了如何做到这一点使用Mozilla-和WebKit特有的属性. 列像这样的项目是9号就行了. 对于IE浏览器,你需要等待CSS3支持或使用脚本,如在文章中提到的Colum

  • HTML5,CSS3和JavaScript学习资源 2012-04-20

    嗨,大家好,我四处寻找一些在HTML功能深度的资源,如<audio> , <video>和<canvas>以及如何JS和CSS / CSS3可以用来创建动态图形/游戏和插图与<canvas>标签,我看了两个CSS3和HTML5 2本书,他们更多的只是"未来",而不是实际应用的概述. 我在寻找更多的,我可以从头到尾学习基本面基于项目的账面/网络资源. 谢谢! 迈尔斯 --------------解决方案------------- 请潜入HT

  • 有没有在SharePoint 2010中的任何​​限制作出任何设计与语义HTML5,CSS3和jQuery网站? 2012-07-13

    有没有在SharePoint 2010中的任何​​限制作出任何设计与语义HTML5,CSS3和jQuery网站? 是否有任何差异,使网站与 SharePoint比较使用 WordPress在使用 HTML,CSS 和JavaScript的jQuery等方面? 我可以提供HTML + CSS + jQuery的模板(这样)到SharePoint开发者整合? 我需要一个PSD转换为HTML + CSS + JS和我有免费的微软的Visual Web Developer Express在我的电脑. 有

  • 什么是HTML,CSS,PHP,Javascript中,等等,最好的书 2012-10-20

    我决定要瞄准我的研究是一个很好的Web开发人员,学习的东西,如Java EE和等.但首先,我想创造一个良好的基础. 在创建先进的网络系统,我想知道如何创建良好的网站,与基础知识,如HTML,CSS,Javascript代码,PHP,模式,设计,结构. 那么,什么是学习它的最好的书. 我想东西exemples和exercicies,像小项目. 那是因为我已经尝试过学习这个东西,没有初步实践其用武之地. 谢谢! (OBS:我认为,睡前的Java EE,其良好是一个很好的网页设计师,从基础做起,右)

  • 是否有可能得到切出这样的使用CSS /只CSS3的文字效果? 2013-03-15

    是否有可能得到切出这样的使用CSS /只CSS3的文字效果? 或图像是唯一的选项来获得这种效果. --------------解决方案------------- 这应该工作: 这里有一个小窍门,我发现用:before和:after伪元素: http://dabblet.com/gist/1609945 text-shadow是你的朋友. 对于很多例子,你可以用它达到什么样看到这个页面. [举例]#8看起来很有希望. 我发现这个http://jsfiddle.net/NeqCC/ 它支持白色背景和

  • 不透明度淡出的形象,CSS3和JS吗? 2013-09-13

    有使用Javascript或CSS3办法有一个图象的左侧和右侧淡出到背景. --------------解决方案------------- 您可以覆盖一个PNG图像在图像来获得预期的效果. IE浏览器不能正常显示部分透明的PNG图像. 对于这个浏览器,你需要一些变通方法如IE修复PNG. 这里演示 在现代浏览器,你可以使用CSS3 box-shadow属性用于此目的. CSS3这里演示 <div style="position:relative;height:100px;width:100

  • 寻找一些CSS,这将使我的链接看起来像按钮 2013-10-22

    可能重复: 如何让我的HTML链接看起来像一个按钮? 我看了看周围的网络上. 发现了一些链接,非常丰富多彩的按钮,看上去并不像按钮在所有:-) 有没有人在那里,有一些CSS,他们发现还是想出了可以帮助我,使我的链接看起来像"真实"的按钮,我看到我的形式使用"提交"按钮类型. 如果CSS使用图形的背景,我不介意. 只是寻找一些模拟尽可能接近一个按钮. 我还可以使用jQuery,因为我有我的网页上. 非常感谢你 --------------解决方案-----------

  • 如何创建的是,在HTML5,CSS3和jQuery的iframe打开链接列表? 2014-04-22

    我想创建一个使用HTML5,CSS3和JQuery两个垂直的div. 一个div包含URL和另一个div包含的内容. 当我点击DIV1链路上的相关页面应该DIV2显示出来. 页1被激活的例子: DIV1 DIV2 **http://www.yahoo.com** Yahoo Home Page http://www.bing.com http://www.google.com 页2被激活的例子: DIV1 DIV2 http://www.yahoo.com Bing Home Page **ht

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

55228885 版权所有 京ICP备15002868号

processed in 2.853 (s). 11 q(s)