纯css制作瀑布流样式

最新推荐文章于 2023-10-29 18:58:29 发布

hjy170314

最新推荐文章于 2023-10-29 18:58:29 发布

阅读量425

点赞数

分类专栏：前端知识文章标签： css 前端

本文链接：https://blog.csdn.net/hjy170314/article/details/90546540

版权

前端知识专栏收录该内容

104 篇文章 2 订阅

订阅专栏

在制作瀑布流格式的时候，一开始没有发现这个问题，当我只有两行的时候，每相隔一个div的大小一样的时候，我发现我的第一列的div一小部分内容跑到第二列中去了，这使我很无解，目前我还没有想到解决的方法用瀑布流的写法，用js进行布局倒是可以解决这个问题。

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流格式</title>
    <style>
    .contain{
        width: 500px;
        height: 600px;
        overflow: hidden;
        overflow-y: scroll;
        margin: auto;
        column-count: 2;
	    -webkit-column-count: 2;
	    -moz-column-count: 2;
    }
    .item{
        width: 240px;
        height: 100px;
        background: saddlebrown;
        margin-bottom: 2px;
    }
    </style>
</head>
<body>
    <div class="contain">
        <div class="item" style="height: 100px"></div>
        <div class="item" style="height: 80px"></div>
        <div class="item" style="height: 100px"></div>
        <div class="item" style="height: 80px"></div>
        <div class="item" style="height: 100px"></div>
        <div class="item" style="height: 80px"></div>
        <div class="item" style="height: 100px"></div>
        <div class="item" style="height: 80px"></div>
        <div class="item" style="height: 100px"></div>
        <div class="item" style="height: 80px"></div>
    </div>
</body>
</html>

这是我的效果图：

我在尝试用css来解决这个问题，如果大家有什么好的建议，请大家能告诉我一下，我也学习一下。谢谢

hjy170314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css制作瀑布流样式

在制作瀑布流格式的时候，一开始没有发现这个问题，当我只有两行的时候，每相隔一个div的大小一样的时候，我发现我的第一列的div一小部分内容跑到第二列中去了，这使我很无解，目前我还没有想到解决的方法用瀑布流的写法，用js进行布局倒是可以解决这个问题。这是我的代码<!DOCTYPE html><html lang="en"><head> &...
复制链接

扫一扫

专栏目录