CSS3 : column属性

最新推荐文章于 2024-07-02 21:06:15 发布

歌歌的前端学习之路

最新推荐文章于 2024-07-02 21:06:15 发布

阅读量915

点赞数 1

分类专栏： css 文章标签： CSS3

本文链接：https://blog.csdn.net/webEvelement/article/details/81331468

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS3的column属性可以将一段文本或内容像报纸那样分栏显示，具体使用方法如下介绍。

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