CSS3多列创建的规则了解

CSS3多列创建的规则了解

开发工具与关键技术：DW /CSS3
作者：刘家龙
撰写时间：2019/2/12

下面让我们来了解一些CSS3多列的一些基本规则，当文本需要分为多列时运用这个规则就十分的方便。比如我们在一个div或者标签中需要将文本分为好几列时就需要用到以下规则：
1.column-count 该属性用于元素 被划分的列数，比如我们可以将div里面的文本由一列显示改为三列显示，让我们来看一下代码图和效果图：


2.column-gap 该属性是用来设置列之间的间距，以便于调整列的占屏宽度，下面是具体的效果图：


3.column-rule 该属性可以设置列之间的宽度，样式和颜色规则，是所有设置column-rule属性的简写，这里就不一一介绍了。为了更好的区分列于列，下面我们在列于列之间设置一条实线，效果图如下：


这样是不是感觉更加的明显了，区分了列于列的同时也能让人更容易地阅读。以上就是今天的全部内容，感谢大家的观赏。