美文网首页
HTML5-多列布局

HTML5-多列布局

作者: 木易先生灬 | 来源:发表于2018-10-11 14:08 被阅读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>

结果

2018-10-11_140613.png

相关文章

  • HTML5-多列布局

    多列布局: 一般用于报纸、周刊、杂志的多列排版,内容可以根据列的宽度和高度自动分配。 主要的属性:column-w...

  • html5-多列布局

  • 页面架构

    布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...

  • CSS3开发常用核心技能

    基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局: 二列布局: 三列布局: ⚠️ midd...

  • css常见布局(二)

    采用flex实现两列,三列等多列的布局 一、两列布局 二、三列布局

  • 多列布局

    column-width: 列的宽度 column-count: 列的数量 column-gap: 列与列之间...

  • 多列布局

    column-width: 列的宽度 column-count: 列的数量 column-gap : 列与列的间...

  • 多列布局

  • 多列布局

    简介CSS多列布局继承自块级布局模式,允许简单地定义多列文本。当阅读文字的时候,从一行末尾移动到下一行开始处,容易...

  • 多列布局

    多列布局在一个网页设计中非常常见,不仅可以用来做外部容器的布局,在一些局部也经常出现多列布局,比如下面圈出来的都是...

网友评论

      本文标题:HTML5-多列布局

      本文链接:https://www.haomeiwen.com/subject/obdbaftx.html