使用css实现瀑布流的效果

最新推荐文章于 2024-08-01 15:19:04 发布

花途Jasmine

最新推荐文章于 2024-08-01 15:19:04 发布

阅读量321

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/tomorrow_cmm/article/details/109729698

版权

本文介绍了如何利用CSS display:flex属性创建瀑布流效果，强调设置列数和保持图片宽度一致对于成功实现效果的重要性。

摘要由CSDN通过智能技术生成

使用css实现瀑布流的效果主要是通过display:flex弹性布局的方式。
注意要设置列数
图片的宽度要一致，否则图片显示会有问题
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用css来实现瀑布流的效果</title>
    <style>
        .waterfall{
    
            padding:60px;
            /*设置列数*/
            columns:3;
            /*列之间的距离为0*/
            column-gap:0px;
        }
        .item-content{
    
            /*弹性布局*/
            display: flex;