关于CSS3中多列布局columns的相关属性

CSS3中增加了可以实现多列布局的属性

在此之前的实现很麻烦可能需要各种定位
现在我们只需要一个属性就可以实现
多列布局类似于我们的报纸布局
这样可以方便读者观看

多列数量与多列宽度

如果一行文字太长的话，我们可能会没有读下去的欲望像这样

<p class="demo">......</p>

.demo {    width: 600px;    height: 200px;    border: 1px solid black;}

多列数量column-count可以指定你想要的列数
浏览器会自己设置合适的列宽度

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    column-count: 3; /*增*/}

不指定列数也可以使用column-width设置列宽度
和上面的代码是等价的

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    column-width: 11em; /*改*/}

如果你设置的宽度值不足于撑满整个元素
那么浏览器会尽量使用最大的宽度保证列数撑满整个元素
比如说上面的11em改为10em，浏览器同样会显示3列布局

简写的多列语法

column-count与column-width可以合成一个复合属性columns
可以通过这个属性设置列宽、列数、或者两者都有
不过一般使用的时候，设置其中一个属性就能满足我们的需求

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    /*或者columns: 11em;*/
    /*或者columns: 11em 3;*/}

列间隔宽度

多列布局列与列之间存在这间隔
默认的间隔是1em
我们可以通过column-gap属性控制列间隔

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    column-gap: 2em; /*增*/}

注意如果你的列间隔设置的过大， 文本会溢出的
所以应该配合合适的列数来控制

元素横跨列

我在文本中加入一个标题元素并且改一下高度

<p class="demo"><h1>Angel Beats</h1>......</p>

.demo {    width: 600px;    height: 280px;/*改*/
    border: 1px solid black;    columns: 3;}

默认的情况下，h1元素只是占在第一列中
如果我想要让他置顶在多有列之上，怎么做呢？

对h1元素设置样式

h1 {    column-span: all; <--
    text-align: center;}

column-span可以指定元素横跨的列数默认属性值是1
设置为all，可以让元素横跨所有列

列间隔样式

如果你觉得列与列之间只是空格间隔过于枯燥
我们可以通过column-rule堆列间隔设置“规则”
这个属性是一个复合属性，子属性如下

• column-rule-width

• column-rule-style

• column-rule-color

有点类似于我们设置border属性

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    column-rule: 1px solid black;}

这样列与列之间就用了一个1像素宽的黑色实线

colum-rule-width除了可以设置像素外，
还有三个关键字thin、medium、thick设置三种宽度
column-rule-style属性值有如下关键字

• none 无

• hidden 隐藏

• dotted 点状

• dashed 虚线

• solid 实线

• double 双线

• groove 定义 3D grooved 规则

• ridge 定义 3D ridged 规则

• inset 定义 3D inset 规则

• outset定义 3D outset 规则

其中后四种的效果取决于宽度和颜色值，先了解一下

CSS3的多列布局用的比较少
但是最基本的属性我们还是要知道的

以上就是关于CSS3中多列布局columns的相关属性的详细内容，更多请关注Gxl网其它相关文章！