CSS总结——瀑布流布局

瀑布流布局

瀑布流布局是一种新型的布局方式,可以将大小不一的图片完整的显示在页面上,并且在杂乱的布局中保持着一定的美感,今天学习了一下如何使用瀑布流布局,总结了有以下三种方式。(瀑布流还可以使用grid布局实现,还没有学习过这种方式)

java 复制代码
<div class="container" id="con">
        <div class="item">
                <img src="../img/1.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/2.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/3.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/4.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/5.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/6.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/7.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/8.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/9.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../img/10.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/11.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/12.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../img/13.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/14.jpeg" alt="">
        </div>
        <div class="item">
                <img src="../img/15.jpeg" alt="">
        </div>
    </div>
java 复制代码
 .container{
            column-count: 4;//想要排成的列数
            column-gap: 0;
        }
        .item img{
            width: 100%;
        }
相关推荐
还是鼠鼠1 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味2 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
m0_zj3 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠3 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象3 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
百度网站快速收录3 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
Loong_DQX4 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing4 小时前
react redux监测值的变化
前端·javascript·react.js
engchina4 小时前
CSS 样式化表格:从基础到高级技巧
前端·css
m0_528723814 小时前
react中useEffect的使用
前端·javascript·react.js