CSS3（10）多列

CSS3 多列属性

本章节我们将学习以下几个 CSS3 的多列属性:

• column-count   分割的列数

• column-gap　　　 列与列的间隙

• column-rule-style 列与列间的边框样式

• column-rule-width 列与列间的边框厚度

• column-rule-color 列与列间的边框颜色

• column-rule　　  上面3个的缩写

• column-span    指定元素跨越多少列

• column-width   指定列的宽度


CSS3 创建多列

代码：

<style>

div

{

　　border:1px solid #000;

　　500px;

　　padding:5px;

　　column-count:3;

　　column-gap:20px;

　　column-rule:dotted 1px red;

}

</style>

效果：

当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。

指定元素跨越多少列

代码：

<div style="column-count:3;">

　　<h2 style="column-span:all">这是标题</h2>

　　当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。

</div>

效果：

这是标题

　　当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。

 

column-span的默认值是1，不设置的效果为：

 

这是标题

　　当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。