css3 多列布局 column

最新推荐文章于 2020-07-02 06:38:30 发布

转载最新推荐文章于 2020-07-02 06:38:30 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/esdn/blog/899231

本文介绍了多列布局的基本概念，包括如何使用CSS属性如column来设置列宽和列数，以及column-gap来定义列间的距离。文章还提供了不同浏览器对多列布局的支持情况。

为什么80%的码农都做不了架构师？>>>

由于很长的文字会造成阅读上的困难，所以需要限制文本的宽度，所以有了多列布局。

column ：规定列的宽度和列数

.text {colomn:auto 3}       /* 自动分成 3列 */    
.text {colomn:150px 3}     /* 最小列宽度 150px;方便移动端阅读，3列 */

column-gap：列间接

.text {
    colomn:150px 3                  /* 最小列宽度 150px;方便移动端阅读，3列 */
    colomn-gap:50px                 /* IE10+列间距 */
    -moz-colomn:150px 3              /* 火狐多列 */
}   -moz-colomn-gap:50px            /* 火狐列间接 */