CSS3的column属性

CSS3的column属性可以将一段文本或内容像报纸那样分栏显示,具体使用方法如下介绍。
1. column-count: 需要分割的列数,值为任意正整数

-moz-column-count: 4;
column-count: 4;

<div>
    <h2>这是一段文本</h2>
    这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段
是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这
文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段
这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文
段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一
本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文
是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这
段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一
本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文
是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这
段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一
本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文
是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这
段文本这是一段文本
  </div>

这里写图片描述
2. column-rule: 1px solid ,表示右侧的分栏线条,属性值类似border
这里写图片描述
3. column-gap: 列与列间的间隙,值为数值,单位px
4. column-span: 元素跨越列数,可用值为1和all.
5. column-width: 列的宽度值为数值,单位px

猜你喜欢

转载自blog.csdn.net/webEvelement/article/details/81331468