css技巧之瀑布流实现

最新推荐文章于 2024-05-03 22:21:39 发布

木易兴兴

最新推荐文章于 2024-05-03 22:21:39 发布

阅读量231

点赞数

分类专栏： html-css 文章标签： css 前端 css3 vue.js json

本文链接：https://blog.csdn.net/qq_56992860/article/details/126106042

版权

html-css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.瀑布流实现

实现思路：使用 column 属性

`column-count` 属性，是控制屏幕分为多少列。

`column-gap` 属性，是控制列与列之间的距离。

子模块添加  `break-inside: avoid;` 防止·图文分离

<html>
<head>
    <style>
        .box {
            margin: 10px;
            //使用 column 实现 瀑布流布局
            column-count: 2;
            column-gap: 10px;
        }
        .item {
            //防止图文分离
            break-inside: avoid;
            margin-bottom: 10px;
        }
        .item img{
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img  src="banner.jpg" alt="" />
    </div>
</div>
</body></html>