css不规范导致的布局显示问题
发布于 4 年前 作者 xiulan29 2589 次浏览 来自 分享

前言

这是在做 《#小程序云开发挑战赛#-情侣券-想做就做》 这个项目过程中遇到了两个CSS不规范导致布局显示的问题。

踩坑

布局重叠

效果展示


左边是iOS手机,右边是模拟器(Android手机效果一致)

布局代码


采用的布局结构是外面一个view用盒子模型包裹这三个布局,分别是头图区域,自定义模版模块,系统模版模块。

解决方案

最后定位是因为最外层的布局写死了高度的原因,把高度去掉就好了。
样式代码:

.container{
  width: 100vw;
 /* height: 100vh; */
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
}

布局错位

效果展示


左边是iOS手机,右边是模拟器(Android手机效果一致)

布局代码


由于需要覆盖到中心点,中间的【已使用】状态的印章图片采用的是 absolute(绝对定位)定位到中心点。

解决方案


在外层的布局上加一个 relative(相对定位)的定位方式。

总结

感谢【微喵网络】在评论区指出本文问题和推荐学习网站,目前已修改。
CSS学习网站:https://developer.mozilla.org/zh-CN/docs/Web/CSS

如果觉得不错就给我的 《#小程序云开发挑战赛#-情侣券-想做就做》 点个赞,谢谢。

1 回复

这是坑?明明是你代码写错了,安卓没按标准去渲染,有坑的是安卓

回到顶部