CSS3 多列

原创 2013年12月04日 14:34:50

CSS3 多列

通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!

浏览器支持

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 以及更早的版本不支持多列属性。


新的多列属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
column-count 规定元素应该被分隔的列数。 3
column-fill 规定如何填充列。 3
column-gap 规定列之间的间隔。 3
column-rule 设置所有 column-rule-* 属性的简写属性。 3
column-rule-color 规定列之间规则的颜色。 3
column-rule-style 规定列之间规则的样式。 3
column-rule-width 规定列之间规则的宽度。 3
column-span 规定元素应该横跨的列数。 3
column-width 规定列的宽度。 3
columns 规定设置 column-width 和 column-count 的简写属性。 3


实验代码

<!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=utf-8" />
<style>
.newspaper{
	column-count:3;	
	-moz-column-count:3;
	-webkit-column-count:3;
	
	column-gap:40px;
	-moz-column-gap:40px;
	-webkit-column-gap:40px;
	
	column-rule:dashed 1px #F00;
	-moz-column-rule:dashed 4px #F00;
	-webkit-column-rule:dashed 4px #F00;
	
/*	column-width:100px;
	-moz-column-width:100px;
	-webkit-column-width:100px;
*/
}
h2{
	column-span:all;
	-wedkit-column-span:all;
}
</style>
<title>无标题文档</title>
</head>

<body>
<div class="newspaper">
<h2>卡梅伦赠送习近平彭丽媛及李克强夫妇礼物曝光</h2>
	据新华社电 英国首相卡梅伦3日在上海表示,英中伙伴关系"不可或缺",英国支持中国与欧盟开展自贸协定谈判,英国将对来自上海的中国商务旅客实施"一天签证"。值得一题的是,卡梅伦此次访华除了大谈经济议题,还带了不少礼物赠送给中国国家领导人。

卡梅伦带给习近平主席的礼物是一件英格兰男子足球队的球衣,上面有所有成员的签名。彭丽媛则收到了卡梅伦赠送的迈宝瑞手套。

卡梅伦送给李克强总理及其夫人程虹的礼物是一系列的书籍。卡梅伦带给李克强总理的书籍主要是名人传记,包括撒切尔夫人、丘吉尔、本杰明·迪斯雷利以及威廉·威伯福斯等人的传记。此外,还有英国专栏作家罗伯特·哈德曼撰写的《伊莉莎白传》。作为著名的网球粉丝,李克强还收到了英国网球明星安迪·穆雷亲笔签名的网球拍。

卡梅伦赠送给程虹的则是英国布克奖获奖小说选,包括希拉里·曼特尔以及茱莉亚·巴恩斯等人的作品。

作为回赠,李克强总理送给卡梅伦一幅画作、一座高铁模型,以及送给卡梅伦小女儿弗洛伦斯的玩偶。

卡梅伦表示,所有这些礼物都是由随行的英国公司提供的。(潇湘晨报)

■ 事实+

为什么要送高铁模型?高铁外交

近年来中国领导人推荐的产品在发生一些变化——不再只是服装和彩色电视,而是开始推荐"高铁"等高技术产品。国家发改委综合运输研究所研究员罗仁坚告诉新京报记者,面对质疑,高铁在境外的推广变得艰难,领导人推动,市场更容易打开。 "相对其他产品,高铁设备具有高技术附加值。推销高铁不仅是卖出去一辆车,出口装备扩大的是影响力。"

过去中国领导人去发达国家出访是"买得多卖得少",花上百亿美元从欧洲进口飞机,大宗买入美国农产品,而现在这种情况正在改变。有境外媒体认为,"高铁外交"甚至可以与"乒乓外交"、"熊猫外交"相媲美,也表明中国外交更为务实。(综合新京报、新华社报道)

卡梅伦为什么送球衣?足球外交

据华尔街日报中文版3日报道,英国首相卡梅伦率贸易代表团开始访问中国,目前中英两国正在尝试利用足球外交来缓和气氛。英国方面利用其最大,且最受欢迎的"出口商品"—足球—来启动此次访华之旅。

日前,中国广州恒大足球队在亚洲赛场上问鼎冠军,终于获得一定国际认可,英国方面的此举也是在趁热打铁。而且众所周知,中国国家主席习近平是一个足球迷。

英国大使馆2日发布声明称,英超联赛、英国文化委员会以及中国教育部2日将签署一项协议,将启动一个在2014年至2016年期间的中国教练培训项目。此外,英超联赛和英国文化委员会将与中国足球协会在此期间共同培训超过200名裁判。作为交换,中超联赛将帮助英超联赛在中国进行推广和营销,这个任务可以说比英方要轻松得多。

据报道,卡梅伦此次率领的"史上规模最大"代表团成员超过120位工商领袖中,甚至还有一位英超球队的副总裁。
</div>
</body>
</html>

效果图







版权声明:原创文章,请标明出处~~~

相关文章推荐

css3-多列

大家好,这里是用来站位的文字 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字 大家好,这里是用来站位的文字 大家好,这里是用来站位的...

CSS3-多列布局+resize+box-sizing+outline讲解

css3多列 通过 CSS3,能够创建多个列来对文本进行布局 - 就像报纸那样 Internet Explorer 10 和 Opera 支持多列属性。 Firefox 需要前缀 -moz-。 Chr...

css3新特性1——文本效果&边框&背景&多列

什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都...
  • cysear
  • cysear
  • 2015年08月06日 14:30
  • 617

CSS3_过渡&动画&多列&用户界面

CSS3_过渡&动画&多列&用户界面

《CSS3实战》笔记--多列布局

书籍《CSS3实战》总结 多列布局

2015-12-11复习之CSS3动画多列

一、column-count(将文章划分的列数) eg:column-count:3; 二、column-gap(文章划分块中间的间距) eg:column-gap:40px; 三、co...
  • cysear
  • cysear
  • 2015年12月11日 23:34
  • 284

css3-使用多列制作瀑布流

Title

css3-多列布局

css3-多列布局   A:-----------     浏览器确定何时结束一列和开始下一列。,自动将内容按照指定的列数排列。 B:-----------     columns: ...

[23]CSS3 多列布局

一.早期多列问题HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局。我们有时想布局成报纸、杂志那样的多列方式(至少两列,一般三列以上),但早期CSS 提供的布局方式都有...

CSS3中多列属性详解

columns[ˈkɑ:ləm]                    多列布局 与之相关的属性或子属性如下所示 一、column-width        设置每列的宽度 属性值如下所示: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 多列
举报原因:
原因补充:

(最多只允许输入30个字)