CSS3 多列

CSS3 多列CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例:





.newspaper { border:





1px black solid; padding:





15px; -webkit-column-count:





3; /* Chrome, Safari, Opera */ -moz-column-count:





3; /* Firefox */ column-count:





3; -webkit-column-gap:





40px; /* Chrome, Safari, Opera */ -moz-column-gap:





40px; /* Firefox */ column-gap:





40px; -webkit-column-rule:





1px solid lightgrey; /* Chrome, Safari, Opera */ -moz-column-rule:





1px solid lightgrey; /* Firefox */ column-rule:





1px solid lightgrey;}k88.net - 学的不仅是技术，更是梦想！k88.net(www.k88.net)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。属性column-count4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-11.1column-gap4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-11.1column-rule4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-11.1column-rule-color4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit11.1column-rule-style4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit11.1column-rule-width4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit11.1column-width4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit11.1CSS3 多列属性本章节我们将学习以下几个 CSS3 的多列属性:





column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-widthCSS3 创建多列column-count 属性指定了需要分割的列数。以下实例将 <div> 元素中的文本分为 3 列：实例div{   -webkit-column-count:





3; /* Chrome, Safari, Opera */   -moz-column-count:





3; /* Firefox */    column-count:





3;}尝试一下 ?CSS3 多列中列与列间的间隙column-gap 属性指定了列与列间的间隙。以下实例指定了列与列间的间隙为 40 像素：实例div{   -webkit-column-gap:





40px; /* Chrome, Safari, Opera */   -moz-column-gap:





40px; /* Firefox */   column-gap:





40px;}尝试一下 ?CSS3 列边框column-rule-style 属性指定了列与列间的边框样式：实例div{   -webkit-column-rule-style:





solid; /* Chrome, Safari, Opera */   -moz-column-rule-style:





solid; /* Firefox */   column-rule-style:





solid;}尝试一下 ?column-rule-width 属性指定了两列的边框厚度:





实例div{   -webkit-column-rule-width:





1px; /* Chrome, Safari, Opera */   -moz-column-rule-width:





1px; /* Firefox */   column-rule-width:





1px;}尝试一下 ?column-rule-color 属性指定了两列的边框颜色：实例div{   -webkit-column-rule-color:





lightblue; /* Chrome, Safari, Opera */   -moz-column-rule-color:





lightblue; /* Firefox */   column-rule-color:





lightblue;}尝试一下 ?column-rule 属性是 column-rule-* 所有属性的简写。 以下实例设置了列直接的边框的厚度，样式及颜色：实例div{   -webkit-column-rule:





1px solid lightblue; /* Chrome, Safari, Opera */   -moz-column-rule:





1px solid lightblue; /* Firefox */   column-rule:





1px solid lightblue;}尝试一下 ?指定元素跨越多少列以下实例指定 <h2> 元素跨越所有列：实例h2 {   -webkit-column-span:





all; /* Chrome, Safari, Opera */   column-span:





all;}尝试一下 ?指定列的宽度column-width 属性指定了列的宽度。实例div {   -webkit-column-width:





100px; /* Chrome, Safari, Opera */   column-width:





100px;}尝试一下 ?CSS3 多列属性下表列出了所有 CSS3 的多列属性：属性描述column-count指定元素应该被分割的列数。column-fill指定如何填充列column-gap指定列与列之间的间隙column-rule所有 column-rule-* 属性的简写column-rule-color指定两列间边框的颜色column-rule-style指定两列间边框的样式column-rule-width指定两列间边框的厚度column-span指定元素要跨越多少列column-width指定列的宽度columns设置 column-width 和 column-count 的简写