CSS3实战之多列
CSS2中如果要设计多列布局,常用的方法有浮动和定位,但是浮动容易错位,定位无法满足模块的自适应能力,以及模块之间的文档流联动的需要。为了解决多列布局的难题,CSS3新增了多列自动布局功能。
利用多列布局属性可以自动将内容按指定的列数排列,这种特性特别适合报纸和杂志类网页布局。
1.columns
可以取的值有
.test{columns:<column-width> || <column-count>}
比如
.test{columns:250px 3;}
意思为,250px一列,总共三列。
放一篇文章上来试试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css" media="screen"> body { -webkit-columns: 250px 3; columns: 250px 3; } h1 { color:#333333; background:#DCDCDC; padding:5px 8px; font-size:20px; text-align:center; padding:12px; } h2 { font-size:16px; text-align:center; } p { color:#333333; font-size:14px; line-height:180%; text-indent:2em; } </style> <title>columns</title> </head> <body> <h1>故都的秋(选段)</h1> <h2>郁达夫</h2> <p> 秋天,无论在什么地方的秋天,总是好的;可是啊,北国的秋,却特别 地来得清,来得静,来得悲凉。我的不远千里,要从杭州赶上青岛,更要从青岛赶上北平来的理由,也不过想饱尝一尝这"秋",这故都的秋味。 </p> <p>江南,秋当然也是有的;但草木雕得慢,空气来得润,天的颜色显得淡,并且又时常多雨而少风;一个人夹在苏州上海杭州,或厦门香港广州的市民中间,浑沌沌地过去,只能感到一点点清凉,秋的味,秋的色,秋的意境与姿态,总看不饱,尝不透,赏玩不到十足。秋并不是名花,也并不是美酒,那一种半开,半醉的状态,在领略秋的过程上,是不合适的。 </p> <p>不逢北国之秋,已将近十余年了。在南方每年到了秋天,总要想起陶然亭的芦花,钓鱼台的柳影,西山的虫唱,玉泉的夜月,潭柘寺的钟声。在北平即使不出门去罢,就是在皇城人海之中,租人家一椽破屋来住着,早晨起来,泡一碗浓茶,向院子一坐,你也能看到很高很高的碧绿的天色,听得到青天下驯鸽的飞声。从槐树叶底,朝东细数着一丝一丝漏下来的日光,或在破壁腰中,静对着像喇叭似的牵牛花(朝荣)的蓝朵,自然而然地也能够感觉到十分的秋意。说到了牵牛花,我以为以蓝色或白色者为佳,紫黑色次之,淡红色最下。最好,还要在牵牛花底,教长着几根疏疏落落的尖细且长的秋草,使作陪衬。 </p> <p> 北国的槐树,也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊,早晨起来,会铺得满地。脚踏上去,声音也没有,气味也没有,只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后,灰土上留下来的一条条扫帚的丝纹,看起来既觉得细腻,又觉得清闲,潜意识下并且还觉得有点儿落寞,古人所说的梧桐一叶而天下知秋的遥想,大约也就在这些深沉的地方。 </p> <p>秋蝉的衰弱的残声,更是北国的特产;因为北平处处全长着树,屋子又低,所以无论在什么地方,都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫,在北平和蟋蟀耗子一样,简直像是家家户户都养在家里的家虫。 </p> <p> 还有秋雨哩,北方的秋雨,她似乎比南方的下得奇,下得有味,下得更像样。 </p> </body> </html>
效果是这样的
2.column-gap
可以控制两列之间的间距
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css" media="screen"> body { -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em; line-height:2.5em; } h1 { color:#333333; background:#DCDCDC; padding:5px 8px; font-size:20px; text-align:center; padding:12px; } h2 { font-size:16px; text-align:center; } p { color:#333333; font-size:14px; line-height:180%; text-indent:2em; } </style> <title>column-gap</title> </head> <body> <h1>故都的秋(选段)</h1> <h2>郁达夫</h2> <p> 秋天,无论在什么地方的秋天,总是好的;可是啊,北国的秋,却特别 地来得清,来得静,来得悲凉。我的不远千里,要从杭州赶上青岛,更要从青岛赶上北平来的理由,也不过想饱尝一尝这"秋",这故都的秋味。 </p> <p>江南,秋当然也是有的;但草木雕得慢,空气来得润,天的颜色显得淡,并且又时常多雨而少风;一个人夹在苏州上海杭州,或厦门香港广州的市民中间,浑沌沌地过去,只能感到一点点清凉,秋的味,秋的色,秋的意境与姿态,总看不饱,尝不透,赏玩不到十足。秋并不是名花,也并不是美酒,那一种半开,半醉的状态,在领略秋的过程上,是不合适的。 </p> <p>不逢北国之秋,已将近十余年了。在南方每年到了秋天,总要想起陶然亭的芦花,钓鱼台的柳影,西山的虫唱,玉泉的夜月,潭柘寺的钟声。在北平即使不出门去罢,就是在皇城人海之中,租人家一椽破屋来住着,早晨起来,泡一碗浓茶,向院子一坐,你也能看到很高很高的碧绿的天色,听得到青天下驯鸽的飞声。从槐树叶底,朝东细数着一丝一丝漏下来的日光,或在破壁腰中,静对着像喇叭似的牵牛花(朝荣)的蓝朵,自然而然地也能够感觉到十分的秋意。说到了牵牛花,我以为以蓝色或白色者为佳,紫黑色次之,淡红色最下。最好,还要在牵牛花底,教长着几根疏疏落落的尖细且长的秋草,使作陪衬。 </p> <p> 北国的槐树,也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊,早晨起来,会铺得满地。脚踏上去,声音也没有,气味也没有,只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后,灰土上留下来的一条条扫帚的丝纹,看起来既觉得细腻,又觉得清闲,潜意识下并且还觉得有点儿落寞,古人所说的梧桐一叶而天下知秋的遥想,大约也就在这些深沉的地方。 </p> <p>秋蝉的衰弱的残声,更是北国的特产;因为北平处处全长着树,屋子又低,所以无论在什么地方,都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫,在北平和蟋蟀耗子一样,简直像是家家户户都养在家里的家虫。 </p> <p> 还有秋雨哩,北方的秋雨,她似乎比南方的下得奇,下得有味,下得更像样。 </p> </body> </html>
3.column-rule
可以定义每列之间边框的宽度、样式和颜色。
语法如下
.test{ column-rule:<column-rule-width>; column-rule:<column-rule-style>; column-rule:<column-rule-color>; column-rule:<transparent>; }
给刚才的文章加上虚线分隔
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css" media="screen"> body { -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em; line-height:2.5em; -webkit-column-rule:dashed 2px gray; -moz-column-rule:dashed 2px gray; column-rule:dashed 2px gray; } h1 { color:#333333; background:#DCDCDC; padding:5px 8px; font-size:20px; text-align:center; padding:12px; } h2 { font-size:16px; text-align:center; } p { color:#333333; font-size:14px; line-height:180%; text-indent:2em; } </style> <title>column-rule</title> </head> <body> <h1>故都的秋(选段)</h1> <h2>郁达夫</h2> <p> 秋天,无论在什么地方的秋天,总是好的;可是啊,北国的秋,却特别 地来得清,来得静,来得悲凉。我的不远千里,要从杭州赶上青岛,更要从青岛赶上北平来的理由,也不过想饱尝一尝这"秋",这故都的秋味。 </p> <p>江南,秋当然也是有的;但草木雕得慢,空气来得润,天的颜色显得淡,并且又时常多雨而少风;一个人夹在苏州上海杭州,或厦门香港广州的市民中间,浑沌沌地过去,只能感到一点点清凉,秋的味,秋的色,秋的意境与姿态,总看不饱,尝不透,赏玩不到十足。秋并不是名花,也并不是美酒,那一种半开,半醉的状态,在领略秋的过程上,是不合适的。 </p> <p>不逢北国之秋,已将近十余年了。在南方每年到了秋天,总要想起陶然亭的芦花,钓鱼台的柳影,西山的虫唱,玉泉的夜月,潭柘寺的钟声。在北平即使不出门去罢,就是在皇城人海之中,租人家一椽破屋来住着,早晨起来,泡一碗浓茶,向院子一坐,你也能看到很高很高的碧绿的天色,听得到青天下驯鸽的飞声。从槐树叶底,朝东细数着一丝一丝漏下来的日光,或在破壁腰中,静对着像喇叭似的牵牛花(朝荣)的蓝朵,自然而然地也能够感觉到十分的秋意。说到了牵牛花,我以为以蓝色或白色者为佳,紫黑色次之,淡红色最下。最好,还要在牵牛花底,教长着几根疏疏落落的尖细且长的秋草,使作陪衬。 </p> <p> 北国的槐树,也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊,早晨起来,会铺得满地。脚踏上去,声音也没有,气味也没有,只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后,灰土上留下来的一条条扫帚的丝纹,看起来既觉得细腻,又觉得清闲,潜意识下并且还觉得有点儿落寞,古人所说的梧桐一叶而天下知秋的遥想,大约也就在这些深沉的地方。 </p> <p>秋蝉的衰弱的残声,更是北国的特产;因为北平处处全长着树,屋子又低,所以无论在什么地方,都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫,在北平和蟋蟀耗子一样,简直像是家家户户都养在家里的家虫。 </p> <p> 还有秋雨哩,北方的秋雨,她似乎比南方的下得奇,下得有味,下得更像样。 </p> </body> </html>
效果如下
4.column-span
可以定义跨列显示
column-span只有两种取值,一种是不跨列,取值为1,一种是跨列,取值为all
.test{ column-span:1; column-span:all; }
5.column-fill
定义栏目高度
.test{ /*随内容变化*/ column-fill:auto; /*根据内容最多列的高度进行统一*/ column-fill:balance; }