FavoriteLoading
◆◆0

css实现多列布局的实践

重蔚 2018年2月27日 css自学教程 1,139 1

今天给大家安利的是一个多列布局的实践 ：Columns ，特别简单，用到的属性是 column-count，column-width，column-gap 为什么会用到 Columns 场景是因为只想在手机上显示两栏，每一个.item都是从后台动态获取 然后遍历出来 渲染到页面

布局如图：

css实现多列布局的实践

概念解释：

column-width：[<length> | auto]  中括号里边<length>长度单位； auto是默认值 由浏览器决定列宽；

column-count：auto | 整数  auto由其他属性决定列数，比如 "column-width"；

column-gap：normal | <length> normal 为默认值，默值为1em（如果你的字号是px伫值，其默认值为你的font-size值）；length 设置列与列之间的距离。

理解完概念之后上代码：

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

 <div class="wrapper">
        <div class="inner_wrapper">
            <div class="item">
                <img src="https://www.cwhello.com/wp-content/uploads/2018/02/timg.png" alt="占位图">
                <span class="count">1</span>
            </div>
            <div class="item">
                <img src="https://www.cwhello.com/wp-content/uploads/2018/02/timg.png" alt="占位图">
                <span class="count">2</span>
            </div>
            <div class="item">
                <img src="https://www.cwhello.com/wp-content/uploads/2018/02/timg.png" alt="占位图">
                <span class="count">3</span>
            </div>
            <div class="item">
                <img src="https://www.cwhello.com/wp-content/uploads/2018/02/timg.png" alt="占位图">
                <span class="count">4</span>
            </div>
            <div class="item">
                <img src="https://www.cwhello.com/wp-content/uploads/2018/02/timg.png" alt="占位图">
                <span class="count">5</span>
            </div>
            <div class="item">
                <img src="https://www.cwhello.com/wp-content/uploads/2018/02/timg.png" alt="占位图">
                <span class="count">6</span>
            </div>
        </div>
    </div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

*{
        margin:0;
    }
    .wrapper{
        padding:10px;
    }
    .inner_wrapper{
        column-count: 2;
        column-width:100px;
        column-gap: 10px;
    }
    .item{
        position: relative;
    }
    .count{
        position: absolute;
        bottom: 4px;
        text-align: center;
        background:rgba(47, 37, 37, 0.5);
        display: inline-block;
        width: 100%;
        color: #fff;
    }
    img{
        width: 100%
    }

运行完就会得到上图的结果，设置 column-count: 2;  column-width:100px;  column-gap: 10px; 是核心点，需要注意的一点是：column-count的值大于2时 inner_wrapper的宽度 < column-width*column-count + padding*2 + margin*2 + column-gap*(column-count-1) 时 本来很简单的东西被这个公式写完之后有点乱了，没关系，看个动图: 为了方便讲解我本地设置column-count: 3时的效果，右上角340px是一个边界，小于340px时会变两列；

css实现多列布局的实践

因为当 column-count: 2 设置为2 时。变成单列时有一个区间值，而不是一个特定的值

看图：

css实现多列布局的实践

以上，但是不影响布局效果的实现，多栏布局其实也可以做到响应式的效果

运行完就会得到上图的结果，设置 column-count: 2; column-width:100px; column-gap: 10px; 是核心点，需要注意的一点是：column-count的值大于2时 inner_wrapper的宽度 < column-width*column-count + padding*2 + margin*2 + column-gap*(column-count-1) 时 本来很简单的东西被这个公式写完之后有点乱了，没关系，看个动图: 为了方便讲解我本地设置column-count: 3时的效果，右上角340px是一个边界，小于340px时会变两列；

因为当 column-count: 2 设置为2 时。变成单列时有一个区间值，而不是一个特定的值
看图：

以上，但是不影响布局效果的实现，多栏布局其实也可以做到响应式的效果

欢迎分享本文，转载请保留出处！—重蔚自留地 站长邮箱：admin@cwhello.com