CSS3基础CSS3多列属性(column-count)实现多列内容

CSS3多列属性(column-count)实现多列内容

CSS3可以对网页实现多列布局,这样以来网页上的内容就能像报纸那样的效果。下面我们简单的试试把一个div分成多列来显示,这里要用到column-count属性(英文column是列的意思,英文count是数量的意思):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
body {margin:50px;}
div {margin:0px;}
#text {column-count:3;}
</style>
</head>
<body>
<div id="text">
在遥远的古代,东方傲来国有座花果山,山上有一块仙石吸收日月精华,内育仙胞,一日迸裂,产一个石猴。这石猴同一群猴子在山中避暑,无意之间发现了一股飞瀑从山顶流下。石猴自告奋勇,钻入飞瀑,发现里面竟然是一个宽敞、幽静的石洞,众猴拜石猴为王,称他美猴王。
蟠桃会这天,孙悟空喝光了宴会用的仙酒,还闯入太上老君的丹房,吃尽了葫芦内的金丹,然后回到了水帘洞。玉帝对孙悟空扰乱蟠桃会甚为痛恨,命令四大天王、托塔李天王和哪吒太子去捉悟空,10万天兵被悟空打败。玉帝又派二郎神来战孙悟空。经过多次交手,在二郎神同悟空大战之际,太上老君抛下金刚琢击中悟空,方才将他捉拿。
</div>
</body>
</html>

我们给div设置了column-count设置了值为3,表示将内容分成3列,浏览这个网页,我们发现内容像报纸那样分成3列显示了。

多列布局.png

在列与列之间有一个间隔的距离,而这个距离可以通过column-gap这个属性来改变(英文gap是间隔的意思),例如上面的例子我们加入这个定义:

#text {column-gap:6em;}

定义这个值后,我们浏览网页,发现列与列之间的距离变成了6个相对单位,当然这里以px为单位也可以。

多列布局间隔.png

列与列之间的空白部分还可以自己定义样式,比如我们可以给中间加上分隔的虚线,使用的属性是column-rule-style,下面我们给上面的网页加上这个样式:

#text {column-rule-style: dashed;}

浏览这个网页,我们发现列之间的空白部分出现了虚线分隔线。

多列分隔线虚线.png

这个分隔线有多种样式可以选择,分别是:

hidden:不显示列与列之间的分隔线,设置的分隔线宽度和颜色属性会被忽略。

dotted:列之间的分隔线显示为点状虚线。

dashed:列之间的分隔线显示为普通虚线。

solid:列之间的分隔线显示为直线。

groove:列之间的分隔线显示为内陷浮雕效果。

ridge:列之间的分隔线显示为外凸浮雕效果。

inset:列之间的分隔线显示为内斜面效果。

outset:列之间的分隔线显示为外斜面效果。

double:列之间的分隔线显示为双直线,两条直线的宽度和间隙宽度的总和等于column-rule-width属性指定的宽度。

刚才提到的column-rule-width属性,顾名思义就是指分隔线的宽度,它可以有下面几个值:

thin 表示较细的分隔线

medium 表示中等宽度的分隔线

thick 表示较宽的分隔线

也可以定义具体的数值来表示宽度,例如column-rule-width:2px ……

此外还可以使用column-rule-color属性来定制分隔线的颜色。

关于分隔线的样式可以简写为一个属性(column-rule),例如:

#text {column-rule:8px solid pink;}

这表示列之间的分隔线为8px宽的粉色直线,效果如下:

多列分隔线样式.png

我们设计网页的时候,并不希望所有的元素都多列显示,比如内容的标题我想显示一整行(跨列显示),就像Word里的合并单元格那样应该怎么做呢?我们只需用column-span属性来定义即可,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
body {margin:50px;}
div {margin:0px;}
#text {column-count:3;
column-gap:5em;
column-rule:8px solid pink;
}
h1 {column-span:all;}
</style>
</head>
<body>
<div id="text">
<h1>西游记第一回 大闹天宫</h1>
在遥远的古代,东方傲来国有座花果山,山上有一块仙石吸收日月精华,内育仙胞,一日迸裂,产一个石猴。这石猴同一群猴子在山中避暑,无意之间发现了一股飞瀑从山顶流下。石猴自告奋勇,钻入飞瀑,发现里面竟然是一个宽敞、幽静的石洞,众猴拜石猴为王,称他美猴王。
蟠桃会这天,孙悟空喝光了宴会用的仙酒,还闯入太上老君的丹房,吃尽了葫芦内的金丹,然后回到了水帘洞。玉帝对孙悟空扰乱蟠桃会甚为痛恨,命令四大天王、托塔李天王和哪吒太子去捉悟空,10万天兵被悟空打败。玉帝又派二郎神来战孙悟空。经过多次交手,在二郎神同悟空大战之际,太上老君抛下金刚琢击中悟空,方才将他捉拿。
</div>
</body>
</html>

浏览这个网页,我们可以看到h1标题是跨列显示的:

多列布局跨列.png

h1标签能够跨列显示,其原因是因为给h1定义了column-span:all这个值,如果不定义这个值,它则会按照前面的定义,“正常”显示在多列布局中的第一列。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/37.html