示例

<!DOCTYPE html><htmllang="zh-cmn-Hans"><head><style>body{font:14px/1.5 georgia,serif,sans-serif;}
p{margin:0;padding:5px10px;background:#eee;}
h1{margin:10px0;font-size:16px;}
div{
width:600px;
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule-width:3px;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule-width:3px;
column-count:3;
column-gap:20px;
column-rule-width:3px;
}
.test{
-moz-column-rule-style:none;
-webkit-column-rule-style:none;
column-rule-style:none;
}
.test2{
-moz-column-rule-style:hidden;
-webkit-column-rule-style:hidden;
column-rule-style:hidden;
}
.test3{
-moz-column-rule-style:dotted;
-webkit-column-rule-style:dotted;
column-rule-style:dotted;
}
.test4{
-moz-column-rule-style:dashed;
-webkit-column-rule-style:dashed;
column-rule-style:dashed;
}
.test5{
-moz-column-rule-style:solid;
-webkit-column-rule-style:solid;
column-rule-style:solid;
}
.test6{
-moz-column-rule-style:double;
-webkit-column-rule-style:double;
column-rule-style:double;
}
.test7{
-moz-column-rule-style:groove;
-webkit-column-rule-style:groove;
column-rule-style:groove;
}
.test8{
-moz-column-rule-style:ridge;
-webkit-column-rule-style:ridge;
column-rule-style:ridge;
}
.test9{
-moz-column-rule-style:inset;
-webkit-column-rule-style:inset;
column-rule-style:inset;
}
.test10{
-moz-column-rule-style:outset;
-webkit-column-rule-style:outset;
column-rule-style:outset;
}
</style></head><body><h1>column-rule-style:none</h1><divclass="test">This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</div><h1>column-rule-width:hidden</h1><divclass="test2">This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</div><h1>column-rule-width:dotted</h1><divclass="test3">This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</div><h1>column-rule-width:dashed</h1><divclass="test4">This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</div><h1>column-rule-style:solid</h1><divclass="test5">This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</div><h1>column-rule-width:double</h1><divclass="test6">This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</div><h1>column-rule-width:groove</h1><divclass="test7">This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</div><h1>column-rule-width:ridge</h1><divclass="test8">This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</div><h1>column-rule-width:inset</h1><divclass="test9">This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</div><h1>column-rule-width:outset</h1><divclass="test10">This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.</div></body></html>