美化效果的属性:
(一)[b]column-gap[/b]主要来设置列与列之间的间距:
语法:column-gap: normal || <length>
1)默值为1em(如果你的字号是px,其默认值为你的font-size值)。
2)length的话,使用px,em单位的任何整数值,但不能是负值。
(二)[b]column-span[/b] 跨列设置,定义一个分列元素中的子元素能跨列多少。
语法:column-span: none | all
默认值none表示不跨越任何列。all表示元素跨越所有列,并定位在列的Z轴之上。
(三)[b]column-rule[/b] 用来定义列与列之间的边框宽度、边框样式和边框颜色。类似于常用的border属性,但是[color=red]不占用任何空间位置[/color]的!
语法:column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
1)column-rule-width默认值为medium,接受任意浮点数,但不接收负值。
2)column-rule-style默认值为“none”,与border-style属值相同,
包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
3) column-rule-color定义列边框颜色,其默认值为前景色color的值。
google亲测成功:
[img]http://dl2.iteye.com/upload/attachment/0105/1788/28b2784c-00d0-33c5-b54a-e7eff2799cf3.jpg[/img]
ff测试未显示。
(一)[b]column-gap[/b]主要来设置列与列之间的间距:
语法:column-gap: normal || <length>
1)默值为1em(如果你的字号是px,其默认值为你的font-size值)。
2)length的话,使用px,em单位的任何整数值,但不能是负值。
(二)[b]column-span[/b] 跨列设置,定义一个分列元素中的子元素能跨列多少。
语法:column-span: none | all
默认值none表示不跨越任何列。all表示元素跨越所有列,并定位在列的Z轴之上。
(三)[b]column-rule[/b] 用来定义列与列之间的边框宽度、边框样式和边框颜色。类似于常用的border属性,但是[color=red]不占用任何空间位置[/color]的!
语法:column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
1)column-rule-width默认值为medium,接受任意浮点数,但不接收负值。
2)column-rule-style默认值为“none”,与border-style属值相同,
包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
3) column-rule-color定义列边框颜色,其默认值为前景色color的值。
.columns {
padding: 5px;
border: 1px solid green;
width: 900px;
margin: 20px auto;
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
-ms-column-count:3;
column-count:3;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
-o-column-gap: 2em;
-ms-column-gap: 2em;
column-gap: 2em;
-webkit-column-rule: 3px gray solid;
-moz-column-rule: 3px gray solid;
-o-column-rule: 3px gray solid;
-ms-column-rule: 3px gray solid;
column-rule: 3px gray solid;
}
h2{
background: green;
padding: 10px;
color: #fff;
}
h2,
p:nth-child(2n){
-webkit-column-span:all;
-moz-column-span:all;
-o-column-span:all;
column-span:all;
}
<div class="columns">
<h2>我要分列显示</h2>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
</div>
google亲测成功:
[img]http://dl2.iteye.com/upload/attachment/0105/1788/28b2784c-00d0-33c5-b54a-e7eff2799cf3.jpg[/img]
ff测试未显示。