微信小程序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的因素流量主我们也要做对应的适配。特别是横幅类型

(7)
枫瑞博客枫瑞博客
上一篇 2022-04-23 09:56
下一篇 2022-05-27 12:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注