用CSS3实现响应式的瀑布流

最新推荐文章于 2024-02-02 16:20:07 发布

VIP文章输出是最好的学习

最新推荐文章于 2024-02-02 16:20:07 发布

阅读量8.8k

点赞数 2

分类专栏：前端文章标签： css3 响应式

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/78487568

版权

前言：虽然瀑布流在现在不是很流行了，自己之前通过JavaScript和css3都实现过。这次做项目的时候又遇到了这个问题，就重新整理了一下，并把代码放出来分享一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .waterfall {
            width: 80%;
            column-gap:10px;
            column-count: 4;
            margin: 0 auto;
        }
        .item {
            padding: 10px;
            margin-bottom: 10px;
            break-inside: avoid;
            border: 1px solid #000;
        }
        img {
            width: 100%;
        }
        p {
            line-height: 30px;
        }

最低0.47元/天解锁文章

优惠劵

输出是最好的学习

关注关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
用CSS3实现响应式的瀑布流

前言：虽然瀑布流在现在不是很流行了，自己之前通过JavaScript和css3都实现过。这次做项目的时候又遇到了这个问题，就重新整理了一下，并把代码放出来分享一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .wate
复制链接

扫一扫