css3 高级特性(4)：多栏布局原来是这么回事

css3 高级特性(4)：多栏布局原来是这么回事

css3 高级特性系列，就是用css3实现一些项目中经常用到的demo，真实场景真实好用

布局是前端必备技能，现在的前端界面布局仿佛flex就可以轻松搞定，技术都是为开发服务，那就时候应该多了解点其他的布局方式，在开发的时候更能游刃有余的选择。

多栏布局

多栏布局是css3引入的新的布局方式，可以解决float或position布局时底部不能对齐。

多栏布局要求各栏宽度必须相等，而且不能指定某一栏的具体的显示，这样的布局方式不适合用于安排整个网页中由元素组成的网页结构，但是适合文章内容的显示。

html代码

<div class="article_content">
    <p>余秋雨 《遇见》</p>
    <p>
        ...文章内容省略
    </p>
</div>

css代码

width：是指定的宽度是所有栏宽度的总和（栏宽度x栏数 + 栏间距x(栏数-1) ）

column-count：用来控制显示几栏

column-gap：栏与栏之间的间隔

column-rule：栏与栏之间增加一条间隔线

column-width：可以单独设置每一栏的宽度，但是还需要在栏外单独设立一个容器，指定该容器的宽度，如果不设置，那么每栏宽度被浏览器视为未设定

.article_content {
    background-image: radial-gradient(ellipse farthest-side at 40% 0%, #455A64 0%, #263238 60%, #1a2327 100%);
    color: #a79f87;
    font-size: 15px;

    width: 800px;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;

    column-gap: 40px;
    -moz-column-gap: 40px;
    -webkit-column-gap: 40px;

    column-rule: 1px dotted #000;
    -moz-column-rule: 1px dotted #000;
    -webkit-column-rule: 1px dotted #000;

    padding: 20px;
}

实现文章效果

问题：如果用float布局时 一篇文章如果分2栏显示？ 一栏显示多少，如何计算？如果再换一篇文章呢，还需要要再次计算吗？…… 一系列的问题将是头疼不已，我已经放弃，所以直接看多栏式布局

结语

如果对本文有任何疑问，欢迎提问哦 如果本文对你有一丁点帮助，点个赞支持一下吧，感谢感谢

本文将同步到个人公众号：言字（欢迎关注👏）