CSS3属性之多栏布局column

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

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

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

样例图片:

QQ20131120112656

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

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

样例代码:

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

样例图片:

css3 之 column

 

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

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

样例代码:

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

样例图片:

QQ20131120113957

 

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>

样例图片:

QQ20131120114358

 

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。

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。