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

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