HTML5-多列布局
2018-10-11 本文已影响0人
木易先生灬
多列布局: 一般用于报纸、周刊、杂志的多列排版,内容可以根据列的宽度和高度自动分配。
主要的属性:
column-width
: 列的宽度
column-count
: 列的数量
column-gap
: 列与列之间的间隙
column-rule
: 复合属性,可以设置边框的宽度、样式、颜色,类似border
column-span
: 是否可以跨列
取值说明:
none
: 不跨列
all
: 横跨所有列
column-fill
: 每列的高度是否统一
取值说明:
auto
: 列高度自适应内容
balance
: 所有列的高度以其中最高的一列统一
HTML
<div id="paper">
<h1>人民日报钟轩理署名文章:给中国对世界贡献算算账</h1>
<p><img src="img/title.jpg"/></p>
<p>中国发展给世界带来了什么?这个问题原本不难回答,但近来美国一些奇谈怪论甚嚣尘上,俨然成了“标准答案”。例如,美国有种说法认为,中国崛起是在搞“经济侵略”,是在实施“地缘政治扩张”,是在“破坏国际规则”。类似论调在美国由来已久,只不过是一股暗流,如今却堂而皇之地成为美国官方的说辞。9月17日,美国领导人居然在其声明中指责中国“对美国经济的长期健康和繁荣构成严峻威胁”。更有甚者,10月4日,美国副总统在演讲中妄称,中国的“成功在很大程度上是由美国在中国的投资所推动的”,“在过去的25年里‘我们重建了中国’”。真是天大的笑话!既然如此,就不能不在世人面前认真评评理、算算账了。这个账怎么算呢?首先,可以从推动世界发展的角度,算一算中国做出多少贡献;其次,可以从促进世界和平的角度,看一看中国做了哪些事;第三,可以从维护国际秩序的角度,评一评中国究竟有没有破坏国际规则。</p>
<p>美国指责中国在世界上搞“经济侵略”,还说自己就是受害者,认为中国“采用了一系列与自由和公平贸易相悖的政策手段……为北京奠定了制造业的基础,但却以牺牲其竞争对手,特别是美利坚合众国的利益为代价”,“中国的这些行为造成了与美国的贸易逆差”,并且口口声声“敦促中国改变这些不公平的做法”,为此甚至不惜挑起贸易战。那现在世界上的损益账该怎么算?这得好好说道说道。</p>
<p>美国认为对华货物贸易存在巨额逆差是“吃亏”,受到了“经济侵略”,还说“吃亏”金额为“2000亿美元”。贸易账不能这样算。要看到,贸易是相互的,各取所需,你情我愿,中国从未强买强卖,也不刻意追求顺差。美国对中国有巨大的市场需求,有买又有卖。根据联合国统计,2017年美国对华货物出口1298.9亿美元,较2001年的191.8亿美元增长577%,远远高于同期美国对全球112%的出口增幅。这还是在美国严格限制对华出口商品种类,有些科技含量都不让卖的情况下做到的。如果美国肯卖高科技产品的话,还会有这么大逆差吗?比方说,美国的福特级航母卖不卖?一艘按150亿美元算,卖给中国4艘,马上就能填上600亿美元的逆差。即便不说航母这么高端的,哪怕美国稍许放宽对华出口限制,货物贸易逆差也不是现在这个状态。</p>
</div>
CSS
<style type="text/css">
#paper{
width: 1000px;
height: 600px;
padding: 10px;
background-color: gainsboro;
margin: 0 auto;
/*多列布局的属性*/
column-count: 3;
column-width: 310px;
column-gap: 35px;
column-rule: 1px dotted #666;
column-fill: auto;
}
#paper h1{
text-align: center;
/*多列布局的属性*/
column-span: all;
}
#paper p img{
width: 99%;
}
</style>