HTML5/CSS 中是否有一种方法可以将列布局如下所示,并且仍然可以正确地显示文本?
###### ######
# C1 # # C2 #
# # # #
###### ######
###### ######
# C3 # # C4 #
# # # #
###### ######
###### ######
# C5 # # C6 #
# # # #
###### ######
只是为了澄清 - 我希望能够在单个元素中编写所有文本并让 CSS 创建列。
虽然这使用单个元素,但必须手动定义中断。
Use the 列跨度 http://www.w3.org/TR/css3-multicol/#column-span属性并使用诸如<br />
定义垂直断点。内容的外观和渲染大致如下:
<p>
CSS3 multi
<br/>
columns are
<br />
just awesome.
</p>
CSS3 | multi
-----------------
columns | are
-----------------
just | awesome
CSS 看起来像:
p {
column-count: 2;
column-rule: 1em solid black;
}
br {
column-span: all;
}
相应地添加浏览器特定的前缀(-webkit、-moz)。column-span
截至目前,任何浏览器可能都不支持。看到这个article http://www.quirksmode.org/css/multicolumn.html了解详情。这是我的软弱attempt http://jsfiddle.net/vwLeq/这在 Chrome 上不起作用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)