CSS3属性之多栏布局column

文将针对CSS 3中的多栏布局做详细介绍，使用多栏布局时只能为所有栏指定一个统一的高度，栏与栏之间的宽度不可能是不一样的，另外也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页结构时。

1.首先我们先定义个div盒子

<style> .box {width: 600px;background-color: #ddd; } </style> <div class="box">我爱北京天安门，天安门上太阳升，伟大领袖毛主席，指引我们向前进！。。</div>

样例图片：

2.使用多栏布局第一个属性：column-count

column-count属性为一个数字表示列数，不带单位，含义是将一个元素中的内容分为多栏进行显示。

样例代码：

<style> .box {width: 600px;backgrond-color: #ddd;column-count: 2; } </style>

样例图片：

 

3.使用多栏布局的第二个属性：column-gap

使用column-gap属性来设定多栏之间的间隔距离。

样例代码：

<style> .box {width: 600px;backgrond-color: #ddd;column-count: 2;column-gap: 60px; } </style>

样例图片：

 

4.使用多栏布局第3个属性：column-rule

column-rule属性在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度、样式、颜色，该属性的指定方法与css中的border属性指定方法相同。

样例代码：

<style> .box {width: 600px;backgrond-color: #ddd;column-count: 2;column-gap: 60px;column-rule: 5px dashed #000; } </style>

样例图片：

 

5.使用多栏布局最后一个属性：column-width

column-width可以设置每一栏的宽度，但是在实际测试中发现并不像描述的那么简单，遂列举出以下几个问题

在设定column-width的同时必须设置盒子的width，否则盒子宽度默认为100%，每栏宽度按照栏数平均分。

盒子每栏宽度必须大于等于column-width设定的值，否则就会减少栏数来增加每栏宽度，例如盒子宽度400px，一共2栏，那么每栏宽度就是200px，如果设置column-width: 210px的话盒子就会变成1栏以保证每栏宽度大于等于column-width:210px;，但是如果每栏宽度大于column-width的值时每栏宽度也不会强制等于column-width，这么看column-width的个性有点像min-width。

总结

以上是生活随笔为你收集整理的CSS3属性之多栏布局column的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。