举报投诉联系我们 手机版 热门标签 名动网
您的位置:名动网 > css3 column CSS3 column-fill 属性

css3 column CSS3 column-fill 属性

2023-03-11 14:20 CSS参考手册

css3 column CSS3 column-fill 属性

css3 column

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 等属性来对多列布局进行优化。

CSS3 column-fill 属性

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 按顺序对列进行填充,列长度会各有不同。

亲自试一试 - 实例

Column-count
把 div 元素中的文本划分为三列。
Column-gap
将 div 元素中的文本分为三列,并规定列间 30 像素的间隔。
Column-rule
规定列之间的宽度、样式和颜色。

相关页面

CSS3 教程:CSS3 多列

CSS 参考手册

阅读全文
以上是名动网为你收集整理的css3 column CSS3 column-fill 属性全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 名动网 mdwl.vip 版权所有 联系我们