css3 瀑布流布局遇见截断下一列展示后半截现象

css3 瀑布流布局遇见截断下一列展示后半截现象

  • 注:css3实现瀑布流布局简直不要太香~~~~~

场景-在uniapp项目中

当瀑布流布局column-grap:10px 相邻两列之间的间隙为10px,column-count:2,2列展示时,就出现了截断问题,如下图:

代码如下:

js 复制代码
<view clss="feeds-comtainer">
    <view class="feeds-box" v-for="(item,index) in feeds" :key="index" >
    ......
    </view>
</view>
css 复制代码
.feeds-comtainer{
    column-count: 2;
    column-gap: 10px;
}
.feeds-box{
		width: 370upx;
		border-radius: 15upx;
		border: 1rpx solid #eee;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 10upx;
}

问题所在:需要个feeds-box容器设置高度,否则含有图片的容器布局会错位展示;如下设置则恢复正常

修改后的代码如下:

css 复制代码
.feeds-box{
		height:100%;
		width: 380upx;
		border-radius: 15upx;
		border: 1rpx solid #eee;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 10upx;
		overflow: auto;
}

css3瀑布流布局还有其他属性

复制代码
    .column-rule属性来设置边框的样式

包括分割线的颜色、样式、宽度。其语法格式为:
column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>

简单的例子:

css 复制代码
view{
    column-rule: 1px solid #ccc;
    }

这里就不给实例了,感兴趣的可以自己去尝试一下

相关推荐
摸爬滚打的小李9 分钟前
SameSite Cookie
前端
小毛驴85013 分钟前
Vue 传统全局引入方式,ES 模块化方式引入 对比
前端·javascript·vue.js
Sobeit14 分钟前
2025 年前端人必学!Tailwind CSS 全面解析与实战
前端
xianxin_20 分钟前
HTML CSS
前端
奇怪的知识又增长了25 分钟前
UILabel 字体缩放适应宽度
前端
萱萱的七彩鱼29 分钟前
css3之三维变换详说
前端·javascript·css3
遗憾随她而去.30 分钟前
前端css 的固定布局,流式布局,弹性布局,自适应布局,响应式布局
前端·css
liweisum40 分钟前
AI驱动 WEB UI自动化---前端技术分享
前端·javascript·typescript
该用户已不存在41 分钟前
2025 年,Python工具别只知道Pycharm了
前端·后端·python
每天开心1 小时前
噜噜旅游App(4)——搜索页面开发教程:热门推荐与关键词搜索模块
前端·前端框架