多栏布局初识

最新推荐文章于 2022-11-29 22:44:29 发布

weixin_30650859

最新推荐文章于 2022-11-29 22:44:29 发布

阅读量75

点赞数

原文链接：http://www.cnblogs.com/chaoyueqi/p/11460060.html

版权

在项目中，遇到如下所示的多栏布局的需求，使用flex的垂直布局+允许换行，效果并不理想，因为flex的垂直布局是需要固定高度，然后是水平方向依次换列。使用Multiple-column布局，刚刚好！详细内容的学习，见以下参考链接

参考链接：写给自己看的CSS columns分栏布局教程

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            background-color: pink;
        }
        .example {
            width: 750px;
            columns: 150px;
            column-gap: 2em;  
            margin: 0 auto;
        }
        .example li {
            background: white;
            padding: 1em;
            margin: 0 0 1.3em;
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
        }
    </style>
</head>
<body>
    <ul class="example">
        <li>1至1月30日的4天之内，已有260家公司预亏超1个亿，其中，87家预亏超10亿元，35家预亏超20亿元，20家预亏超30亿元。按照预亏上限计算，上述260家(预亏超1亿)累计亏损2815亿元，上述87家（预亏超10亿）累计亏损2038亿元，上述35家（预亏超20亿）累计亏损1238亿元，上述20家（预亏超30亿）累计亏损870亿元。1月30日晚间。</li>
        <li>2【中美经贸高级别磋商在华盛顿开幕】当地时间1月30日上午，新一轮中美经贸高级别磋商开幕式在美国白宫艾森豪威尔行政办公楼举行，中共中央政治局委员、国务院副总理、中美全面经济对话中方牵头人刘鹤，美国贸易代表莱特希泽，财政部长姆努钦等出席。本轮磋商于30日至31日在华盛顿进行。</li>
        <li>3【锤子、美图手机SAR标识不合格被点名 还有这些老人机存质量隐患】上海市市场监督管理局抽查了32批次手机产品和20批次老年人手机产品，经检验，共9批次产品不合格。据悉，不合格项目为SAR标志、电源端子的传导骚扰和静电放电抗扰度，涉及手机品牌包括锤子、努比亚、美图、诺基亚、纽曼、天语、小辣椒等。</li>
        <li>4【阿里云年营收突破200亿，成亚洲最大云服务公司】阿里巴巴公布最新财报，2018年阿里云营收213.6亿元，4年增长了约20倍。阿里巴巴过去对云计算的战略投入，正在显现成果。在全球，3A（亚马逊AWS、微软Azure和阿里云）占据了超过七成份额。中国市场上，阿里云市场份额相当于2到9名总和。  </li>
        <li>5【供销总社第六届理事会第八次全体会议在京召开 刘士余当选理事会主任】1月30日，中华全国供销合作总社第六届理事会第八次全体会议在京召开。根据中央提名及总社章程，大会选举刘士余同志为中华全国供销合作总社理事会主任。</li>
        <li>6近日，腾讯理财通发布《2018年终奖调查报告》，报告显示重庆和西安在年终奖城市排名中冲进前五，前三由上海、北京、深圳三座一线城市占据。能源/矿产/环保行业排名位列第一，金融行业排名第三。整体来看，六成受访者拿到的年终奖符合或超过预期，六成受访者拿到年终奖未超过一万元。</li>
        <li>7据统计，目前全国在用姓氏共计6150个。王、李姓户籍人口数量均超1亿。新生儿名字中使用频率最高的字为梓、宇、子、涵、泽、雨、佳、浩、欣、轩；男孩姓名前五依次是浩宇、浩然、宇轩、宇航、宇泽；女孩姓名前五依次是梓涵、一诺、欣怡、诗涵、依诺。</li>
        <li>8aaaaaaaaaaa</li>
        <li>9近日，腾讯理财通发布《2018年终奖调查报告》，近日，腾讯理财通发布《2018年终奖调查报告》，</li>
      </ul>
</body>
</html>

转载于:https://www.cnblogs.com/chaoyueqi/p/11460060.html