Loading
0

css实现多列布局的实践

今天给大家安利的是一个多列布局的实践 :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