浮动

在开发中,很多布局总是在不经意间给人意外,下面这个例子,在浏览器调试界面是完全没有问题的,包括移动端的适配,但是上线之后,发现问题真的好多
下面就记录记录,总结总结,反省反省

开始

代码我就不贴了,毕竟真的都是特别基础的,我还犯这种低级错误真的不应该啊,直接上图
图片描述
上面的界面,我分为三部分,1和2齐平,3在下面

错误写法

下面的写法是错误的,以后不能再犯了,改个小bug上传一次服务器真的神烦,我都嫌弃我自己
起初是,1和2分别左浮动和右浮动,此时123是同级的,为父元素清除浮动之后,3自然排在下面。
可能因为图片的尺寸刚好和2的高度相同,所以布局并没有什么问题,在320px 375px 414px等设备下面是没有问题的
但是发布之后,由于用户的设备物理宽度是各种各样的,这个时候问题来了,就会看见下面这奇奇怪怪的布局。。。
一首凉凉送给自己
图片描述图片描述图片描述

解决方法

解决的方法超级简单,给1和2一个父级,两个浮动的元素和3互不影响,造成上面的原因就是因为1和2的高度不可能完全相等,所以浮动之后就会存在占位的问题
我想给自己翻个白眼,毫无技术可言,艹


miomiomio
147 声望5 粉丝

人生昧履,砥砺而行