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中的多列布局columns详解

columns语法:columns:[ column-width ] || [ column-count ] 设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检...
  • gb4215287
  • gb4215287
  • 2017年06月16日 10:11
  • 340

CSS3多列布局——columns用法

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方...
  • qq_29882585
  • qq_29882585
  • 2016年08月12日 21:00
  • 685

css3 弹性布局和多列布局

css3 弹性布局和多列布局弹性盒子(Flexible Box)是css3中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活性。弹性盒子基础定义一个弹性盒子在父盒子上定义display属性:#bo...
  • Faremax
  • Faremax
  • 2017年02月10日 10:44
  • 1369

CSS3多列布局columns相关属性

CSS3中增加了可以实现多列布局的属性 在此之前的实现很麻烦可能需要各种定位 现在我们只需要一个属性就可以实现 多列布局类似于我们的报纸布局 这样可以方便读者观看多列数量与多列宽度如果一行文字...
  • q1056843325
  • q1056843325
  • 2016年11月20日 23:10
  • 1143

css3多列

通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 在本章中,您将学习如下多列属性: column-countcolumn-gapcolumn-rule...
  • bbsyi
  • bbsyi
  • 2016年06月02日 10:11
  • 117

【CSS3】多列布局——Columns

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面...
  • happyhaojie
  • happyhaojie
  • 2016年02月25日 02:02
  • 193

CSS实现多列自适应布局

html> lang="en"> charset="UTF-8"> Title rel="stylesheet" href="css/reset.css"> type...
  • tfx919
  • tfx919
  • 2017年03月05日 15:31
  • 268

CSS3多列布局

最近买了基本书,因为在实习的时候用到很多CSS动画,师父给任务的时候,也会让布局一些设计页面。在做的过程中,觉着自己的css功底还是不行,所以就想再多积累多学习。今天主要看的是大漠的《图解CSS3》,...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016年03月06日 10:55
  • 763

【CSS3】多列布局——column-count

column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则: column-count:auto | 取值说明: 属性值 ...
  • happyhaojie
  • happyhaojie
  • 2016年02月25日 02:14
  • 169

CSS3 多列布局(20160904-0035)

CSS3 多列布局,示例
  • u010494204
  • u010494204
  • 2016年09月09日 10:25
  • 180
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 多列
举报原因:
原因补充:

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