欢迎光临小鱼网个人网站!

登录/注册
CSS瀑布流布局

1、column-count 把div中的文本分为多少列

2、column-width 规定列宽

3、column-gap 规定列间隙

4、break-inside: avoid; 避免元素内部断行并产生新列

<div class="box">
    <div class="item">111</div>
    <div class="item">222</div>
    <div class="item"></div>
    <div class="item"></div>
</div>
.box {margin: 0 auto;width: 100%;column-count: 2;column-width: 334px;column-gap: 20px;}
.item{margin-bottom: 10px;break-inside: avoid; } /* 防止多列布局,分页媒体和多区域上下文中的意外中断 */

flex布局

<div class="box">
    <div class="col">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="col">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
.box{display: flex;flex-direction: row;margin: 0 auto;width: 100%;}
.col{margin-right: 20px;flex-direction: column;width: 334px;}
.item {background:#fff;margin-bottom:20px;}


Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。