CSS3 column 是 CSS3 中新增的一个属性,它可以将一段文本分割成多列,从而达到报纸、杂志等效果。它的语法如下:
column-count:; column-width: ; column-gap: ;
其中 column-count 属性用于设置文本的列数,column-width 用于设置每列的宽度,column-gap 用于设置每列之间的间隙。
使用 CSS3 column 属性可以很方便地实现多列布局,而且还可以通过 column-rule 属性来设置每列之间的分割线。此外,CSS3 还提供了 break-before、break-after 和 break-inside 等属性来控制文本在不同列之间的流动。
CSS3 column 还可以通过 column-span 属性来实现文本跨越多个列,这样就可以很方便地实现标题占据多行的效果。此外,CSS3 还提供了 column-fill 和 column-rule-color 等属性来对多列布局进行优化。
CSS 参考手册
规定如何对列进行填充:
div
{
column-fill:auto;
}
主流浏览器都不支持 column-fill 属性。
属性 | |||||
---|---|---|---|---|---|
column-fill | 不支持 | 不支持 | 13.0 -moz- | 不支持 | 不支持 |
column-fill 属性规定如何填充列(是否进行协调)。
默认值: | balance |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.columnFill="auto" |
column-fill: balance|auto;
值 | 描述 |
---|---|
balance | 对列进行协调。浏览器应对列长度的差异进行最小化处理。 |
auto | 按顺序对列进行填充,列长度会各有不同。 |
CSS3 教程:CSS3 多列
CSS 参考手册
CSS3 column-rule-width 属性实例指定列之间的宽度规则:div{column-rule-width:10px;-moz-column-rule-width:10px; -webkit-col...
CSS3 grid-rows 属性实例定义为100像素的标题行,必要的并添加许多附加的30和60像素的高度:div{grid-rows:100px (30px 60px);}...
CSS 参考手册实例使 div 元素匀速向下移动:@keyframes mymove{from {top:0px;}to {top:200px;}}@-moz-keyframes mymove {from {...
CSS padding-left 属性实例设置一个P元素的左部填充:p {padding-left:2cm;}属性定义及使用说明padding-left属性设置一个元素的...