浮动布局错误

kuangcaibao 发布于2019-08-30 14:16 / 3129人阅读

摘要：可能因为图片的尺寸刚好和的高度相同，所以布局并没有什么问题，在等设备下面是没有问题的但是发布之后，由于用户的设备物理宽度是各种各样的，这个时候问题来了，就会看见下面这奇奇怪怪的布局。。。

浮动

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

开始

代码我就不贴了，毕竟真的都是特别基础的，我还犯这种低级错误真的不应该啊，直接上图

上面的界面，我分为三部分，1和2齐平，3在下面

错误写法

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

解决方法

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

混合云云服务器 html浮动向上浮动上下浮动左右浮动表头浮动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115905.html

浮动布局错误

摘要：可能因为图片的尺寸刚好和的高度相同，所以布局并没有什么问题，在等设备下面是没有问题的但是发布之后，由于用户的设备物理宽度是各种各样的，这个时候问题来了，就会看见下面这奇奇怪怪的布局。。。浮动在开发中，很多布局总是在不经意间给人意外，下面这个例子，在浏览器调试界面是完全没有问题的，包括移动端的适配，但是上线之后，发现问题真的好多下面就记录记录，总结总结，反省反省开始代码我就不贴了...

阿罗 2019-08-02 16:01 评论0 收藏0
css常见布局

摘要：圣杯布局对于三栏布局来说，左右两栏一般放置目录等简要信息，中间一栏是主要信息。无论是三栏布局还是两栏布局，以上方法都适用。纯浮动布局左右两栏分别向左右浮动，中间设置值，宽度自适应。圣杯布局对于三栏布局来说，左右两栏一般放置目录等简要信息，中间一栏是主要信息。页面加载时，用户最希望第一时间看到的是中间一栏内容，所以根据文档流加载顺序（从上到下），中间一栏必须放在左右两栏的前面。而实际...

douzifly 2019-08-30 13:18 评论0 收藏0
CSS布局 ——从display，position， float属性谈起

摘要：生成相对定位的元素，相对于元素本身正常位置进行定位。元素的位置通过以及属性进行规定。因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过属性控制叠放顺序，越高，元素位置越靠上。页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Maste...

hover_lew 2019-04-23 13:44 评论0 收藏0
css随堂笔记（三）

摘要：随堂笔记三关于背景图片设置背景图片图片的路径背景图片位置方位名词背景位置如果只设置一个方位词，另外一个默认居中如果设置的值是两个方位词，与顺序无关数值背景位置如果设置的值是数字一个值得时候，表示水平方向的位移，垂直方向默认居中两个值得Css随堂笔记（三） 1 关于背景图片 A 设置背景图片：background-image：url(图片的路径)； B 背景图片位置： backgrou...

focusj 2019-04-23 13:26 评论0 收藏0
我脑中飘来飘去的css魔幻属性

摘要：先来一张图，看懂的几个属性顺便带上图片出处，文章讲得还可以，理解这张图片，后面就好理解了。元素根据标签的属性决定显示输入框还是按钮。还有，还有近来很火的。最近看到一篇20 个CSS高级技巧汇总的汇总，感触很深，不过我想，与技巧相比，有些常见css布局难题，有时候更加让我们的日常开发变得踌躇沮丧吧。在写这一篇文章之前，自己还写过一篇：我所不注意的那些CSS冷知识，但却阻止了我做项目的速...

JouyPub 2019-08-29 14:02 评论0 收藏0