W3C提供了一个新的属性columns来控制文本布局,主要是对文本模块的单列、多列进行控制。定义每列的宽度和定义的列数以及模块文本样式。
附上columns的一个例子:

- -webkit-column-count:3;
- -webkit-column-width: 150px;
- -webkit-column-gap:50px;
- -webkit-column-rule:1px solid #DCDCDC;
- -webkit-column-fill:balance;
- padding:5px 10px;
- line-height:180%;
-webkit-column-count: 3; 一共3列
-webkit-column-width: 150px; 每列宽度为150个像素
column-count、column-width,可以缩写成columns:150px 3
-webkit-column-gap: 50px; 每列之间的间隔是50像素
-webkit-column-rule: 1px solid #DCDCDC; 每列之间有1像素实线灰色边框,这个与border的定义是一样的。
-webkit-column-fill: balance; 各栏目的高度将会根据内容最多的那一栏的高度进行统一,默认值auto
其实常用到的就只有count、width、rule,这个例子只针对webkit内核浏览器进行制作。目前支持这个属性的内核有:-moz、-o、-ms(IE内核,9.0)
本文详细介绍了W3C提供的columns属性,用于控制文本模块的单列或多列布局,包括每列的宽度、列数、文本样式、列之间的间隔和边框。通过实例展示了如何在不同内核浏览器中实现三列布局。
5835

被折叠的 条评论
为什么被折叠?



