首页课件丨教程安装教程微信小程序Column瀑布流双排列表样式错乱

微信小程序Column瀑布流双排列表样式错乱

最难过的不是结局不够好 ,而是付出的真诚没有被善待

微信小程序Column瀑布流双排列表样式错乱

由大佬“不再以后”建议的文章双排列表,在微信小程序设计的时候思考使用flex布局或者使用column。flex布局好用但是样式属性要写的多,同时不足的是 文章列表的高度是给固定的,若有其中一个高度不统一,则会出现大面积空白

column在做瀑布流上会优于flex,但第一次使用也出现了问题;

我们写一个父容器写上column属性,图文布局略

 .install { column-count: 2;/*分成2列*/ column-gap: 20upx;/*中间间隔*/ margin: 30upx; }

当我们只有两个数据的时候,一切正常世界依然如此美好

微信小程序Column瀑布流双排列表样式错乱

当我们只有一个数据的时候,简直就和IE6一样原地爆炸

微信小程序Column瀑布流双排列表样式错乱

column会将内容分成两列,我们即使列表内容在一个子容器下还是会给分开,因为我们得在子容器下 需要添加break-inside属性

 break-inside: avoid;;/*视为一个整体 不会被分开*/
微信小程序Column瀑布流双排列表样式错乱

是的,列表问题是解决了,我们应该思考流量主的问题。如果我们想在显示4篇文章之后插入一个广告,因为column的因素流量主我们也要做对应的适配。特别是横幅类型

声明: 1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:ceo@zunw.cn,我们将第一时间处理! 2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持 3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明。

给TA赏金
共{{data.count}}人
人已赏金
安装教程

Fusionapp网页打包app教程所有网页都是客户端

2022-11-13 17:16:39

安装教程

MUI自定义底部弹窗自带遮罩层仿支付宝支付弹窗

2022-11-13 17:17:09

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
MySSL 安全签章