CSS瀑布流使用方法及其常见问题

于 2023-02-14 15:38:06 发布
阅读量264 收藏
点赞数
文章标签： css 前端 html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54548097/article/details/129027925
版权
文章讲述了在CSS布局中遇到的问题，即当使用`column-count`设置列布局时，内容超出列的高度会被截断。解决方法是通过给每个块添加`overflow:auto`属性，允许内容自动换行并显示滚动条，从而保持列的完整性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

规范语法

#container{
    margin-top: 15px;
    column-count: 2;//每行展示多少个
    column-gap: 20px;//每个之间的空隙
    
}

遇到的问题

column被强制固定在了同一高度，column一旦超出就会被拦腰截断

解决方法

在每个块上css属性

overflow:auto

qq_54548097
关注
原生CSS瀑布流写法:flex,position,column-count,效果图及缺点
Cvory
05-18 940
原生CSS瀑布流写法 1. 设置column-count： 原理： 将子元素分两列展示，从而实现简单的瀑布流布局 效果： 缺点： 纵向布局，和现在市面以及用户的使用习惯不符 需要一次性拿到所有数据（与瀑布流的数据处理方式不符） 2. 使用flex布局 code： display:flex; flex-wrap:wrap 原理： 超出一行的向下横向布局 效果： 缺点： 虽然是横向布局，但是每一行是不能上下插空 3. 使用position：absolute 效果： 原理： 计算每一个块的位置，赋
css实现简单瀑布流以及存在的问题
菜鸡奋斗ing的博客
10-10 2488
最近有个页面布局需要改为瀑布流的形式，就只单纯显示并没做上拉加载更多的。 先给张效果图，不是很好只是有瀑布流的效果而已： <div id="content"> <div id="imgM" class="trip-bg" ng-click="openModal(businessTypeList[2])"> <i class="icon img trip
纯css瀑布流,用浮动解决瀑布流(vue,uniapp)
帅的一批的博客
03-16 975
纯css瀑布流,一看就会
纯CSS3实现瀑布流布局，附解决布局错乱被截取解决办法
u014206461的博客
05-03 2523
竖向瀑布流 html页面结构 <div class="masonry"> <div class="item"> <img src="" alt=""> </div> <div class="item"> <img src="" a...
使用column-count属性做瀑布流布局
Liyan_Yanna的博客
02-22 3012
需要注意的问题 1、column-count设为2， 但是出现了横向滚动调，问题原因：限制了高度，去掉高度即可 2、左边最后一列一部分内容跑到右边去了，原因：未加 break-inside: avoid; 3、子元素不要加宽度 css代码 .parent { height: calc(100% - 50px); overflow-y: auto; .content { column-count: 2; column-gap: 20px; .setting_wrapper { // 不
瀑布流布局：CSS3多列属性column实现
qq_40868156的博客
03-17 1431
使用CSS3多列属性所踩得坑 多列属性会将容器平分成对应设置列数 如图：column-count: 2， 会将容器分成两列。需要注意：每列之间会有个默认间距，大概是16px，间隔如图红线所处的空白空间。这个空白空间即列之间间隔可以通过column-gap属性调整，若设为0，列之间也就没有间隔啦. 列宽column-width属性不生效问题 在实现瀑布流的父容器.waterfall（最下面附有代码图）中直接设置column-width:100px;属性未生效，每列的内容都会撑满列宽（因为用的是块元素），如
粉色漂亮瀑布流布局图库相册css模板6059.zip
04-07
瀑布流布局是一种常见的CSS布局方式，尤其适用于展示图片。这种布局的特点是每个项目在垂直方向上对齐，当屏幕宽度变化时，项目会自动调整排列以适应新的空间。CSS3的 Flexbox 或 Grid 模块可以实现这样的效果。在这...
jquery+css3实现瀑布流照片墙特效.zip
11-19
瀑布流布局是一种常见的网页设计样式，它以一种不规则的方式排列元素，使页面看起来像一个流动的瀑布。这种布局在展示图片墙时尤其流行，因为它能够有效地利用空间，同时为用户带来视觉上的吸引力。在本项目中，...
原生JS实现瀑布流插件
10-18
瀑布流是一种网页布局形式，常见于图片展示类网站如Pinterest和花瓣网。这种布局的特点是，图片的宽度固定而高度不固定，从而形成类似瀑布一样的错落布局效果。本文将介绍如何使用纯JavaScript来实现一个简单的瀑布...
JavaScript实现瀑布流以及加载效果
10-20
【JavaScript实现瀑布流及其加载效果】瀑布流布局是一种常见的网页设计模式，最早由Pinterest引入，其特点是内容以不规则的多列形式呈现，随着页面滚动不断加载新的内容。这种布局方式在图片展示类网站中尤为常见，...
uniapp 瀑布流 css
最新发布
03-01
#### 方法一：使用 CSS Grid 实现基础瀑布流布局 通过 `grid` 属性可以轻松创建响应式的多列布局，在 UniApp 的页面中同样适用此方式来构建瀑布流效果[^1]： ```css .waterfall-container { display: grid; grid-...
css瀑布流
空&白的博客
11-12 474
简单效果图 内容高度不设置 随内容的高低而显示 <div class="one"> <div class="backfff wid50" v-for="(i,index) in list" :key="index"> 内容... </div> </div> let list=[{},{},{},{}] .one{/*关键样式代码*/ -webkit-column-count: 2; column-count: 2;/*代表一行几列*/ }
瀑布流实现方案探讨
Goaread的博客
12-20 538
最近在仿小红书时又遇到了一个问题，就是笔记的瀑布流展示。我采用的是张鑫旭在博客中提到的一种基于 css3 新的column-count特性的方案，这种方案本来是我最喜欢的，因为不需要额外的标签嵌套，也没有 js 参与布局，css 写起来也是简洁又优雅。但是在使用 safari 调试页面时发现了一个奇怪的问题，使我最终决定放弃这种方案。 最近在仿小红书时又遇到了一个问题，就是笔记的瀑布流展示。 我采用的是张鑫旭在博客中提到的一种基于 css3 新的column-count特性的方案，这种方案本...
CSS3&JavaScript 瀑布流
司马懿的西山居
11-28 1345
实现方法概述 html页面要实现瀑布流，目前有两种方案，它们的适用场景不同 CSS3 的 column-count（适用于所有元素一次性加载，页面更新用分页来实现，且元素与位置依赖度不高的传统布局上） CSS2 的 flot 配合 JavaScript 动态测量（适用于所有元素分批加载，滑动到底部自动添加下一批元素的情况） 当然，网上还有介绍 CSS3 的 grid 方案，很可惜，目前为止，所...
column-count瀑布流实现左右顺序
weixin_54526836的博客
08-26 3436
类似瀑布流布局，解决column-count底部高度问题，解决列第一个留白问题，瀑布流左1右2分布样式
前端的那些事--懒加载
qq_42201141的博客
06-21 257
何为瀑布流布局，一般就是值图片等宽不等长，像下面这个车的图片，高度不等，像瀑布一样往下排列，这种瀑布流布局在旅游类网站比较常见。这里我讲解一下最简单的瀑布流，就是用css3的新增属性 ...
css 瀑布流布局_图片瀑布流，so easy!
weixin_39716105的博客
11-23 344
什么是图片瀑布流用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子：简单来说，就是有很多图片平铺在页面上，每张图片的宽度相同，但是高度不同，这样错落有致的排列出 n 列的样子很像瀑布，于是就有了瀑布流图片一说。实现原理1、第一种方式 第一种方式前提是：图片的宽度固定，但是列可变（根据屏幕大小）通过上面的介绍，我们知道要实现瀑布流的前提是宽度一致（假如为100px），高度可以不相同。我们首先确定...
在iOS上实现瀑布流界面
java开发指南博客 【转载】
05-21 145
前阵子需要做一个需求，在iPhone上实现瀑布流效果。 第一眼看到这个需求，我想到的两种解决方案分别是： 1. 使用多个UITableView，然后控制它们同时滚动； 2. 使用一个UIScrollView，然后参考UITableView的实现自己做一个符合需求并且以后可以重用的控件。 我首先尝试了第一个方案，并且Google过控制多个UITableView同时滚动的代码，在Stack...
关于column-count多列布局内容被切割在下列的解决方法以及瀑布流实现方式
Front小思的博客
05-12 3737
问题：这部分的内容应该是第二列的，但是跑到第三列去了，陷入不合理的！
使用jQuery实现网页瀑布流布局的详细案例
使用jQuery实现瀑布流布局，是一种既简单又高效的方法。下面将详细介绍使用jQuery实现瀑布流的关键知识点和案例分析。 ### 1. 瀑布流布局原理 瀑布流布局在网页中常被用来展示多张图片或者多个卡片，其布局特点是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值