HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020-06-20 11:47
92 查看
今天按照网上例程写小米官网,结果发现
这一部分 设置一个父盒子 然后子盒子分别设置左右浮动 ,代码如下:
.banner { width: 1226px; height: 670px; background-color: green; margin: 0 auto; } .banner .bannerleft { float: left; width: 234px; height: 670px; background-color: orange; } .bannerright { float: right; width: 992px; height: 670px; background-color: pink; }
结果出现的效果是下面这样的:
左侧盒子并没有左浮动,右侧也没有右浮动。查看源码则显示的为0或者很小的数,就是不是自己设置的数。
解决办法:
将H5中左子盒子和右子盒顺序颠倒,结果测试可行,代码:
<div class="bannerright"></div> <div class="bannerleft"> <ul> <li><a href="#">手机卡 电话卡</a></li> <li><a href="#">电视 盒子</a></li> <li><a href="#">笔记本 显示器 平板</a></li> <li><a href="#">家电 插线板</a></li> <li><a href="#">出行 穿戴</a></li> <li><a href="#">智能 路由器</a></li> <li><a href="#">电源 配件</a></li> <li><a href="#">健康 儿童</a></li> <li><a href="#">耳机 音箱</a></li> <li><a href="#">生活 箱包</a></li> </ul> </div>
最后的效果如下所示:
虽说问题解决了 但是并不知道是什么原因,左和右盒子难道不是并列关系吗,为什么要换顺序才行。
总结
到此这篇关于HTML5+CSS设置浮动却没有动反而在中间且错行的文章就介绍到这了,更多相关html css设置浮动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- H5+CSS设置浮动却没有动,反而在中间且错行
- hadoop2.6.2集群环境搭建在经过几天的环境搭建,终于搭建成功,其中对于hadoop的具体设置倒是没有碰到很多问题,反而在hadoop各节点之间的通信遇到了问题,而且还反复了很多遍,光虚拟机就重
- div+css布局问题:设置浮动后的div高度变化后不超出最外层div
- 探讨CSS中元素浮动后,文字环绕于浮动元素周围,没有与浮动元素重合的问题
- [html5入门-10]解决设置了float了的子元素的父级边框和背景不显示的问题
- html5纯css字体大小自适应设置
- css 对div用hover设置border,出现抖动和div走位问题,解决方法
- 系统中没有邮件客户端设置autoLink=email会挂掉的问题
- 关于css清除浮动,解决内容溢出的问题
- html5 css 问题
- radio,checkbox设置checked却没有正常选中的问题
- springmvc controller跳转到页面没有加载css问题
- css图片透明度设置问题
- IE9以下版本浏览器对HTML5新增标签不识别,导致CSS不起作用的问题
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
- datagrid下fitcolums设置没有铺满100%问题
- 关于iOS项目中引入Html5文件(html/js/css)的路径问题
- 解决360浏览器和谷歌(Google Chrome)浏览器下CSS设置字体大小小于12px无法生效的问题
- canvas学习笔记——关于css设置canvas画布大小的问题
- Web开发——问题:js/css文件修改提交后,没有效果