css不规范导致的布局显示问题
前言
这是在做 《#小程序云开发挑战赛#-情侣券-想做就做》 这个项目过程中遇到了两个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
如果觉得不错就给我的 《#小程序云开发挑战赛#-情侣券-想做就做》 点个赞,谢谢。