HTML5+CSS设置浮动却没有动反而在中间且错行的问题


Posted in HTML / CSS onMay 26, 2020

今天按照网上例程写小米官网,结果发现

HTML5+CSS设置浮动却没有动反而在中间且错行的问题

这一部分 设置一个父盒子 然后子盒子分别设置左右浮动 ,代码如下:

.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;
}

结果出现的效果是下面这样的:

HTML5+CSS设置浮动却没有动反而在中间且错行的问题 

左侧盒子并没有左浮动,右侧也没有右浮动。查看源码则显示的为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设置浮动却没有动反而在中间且错行的问题

虽说问题解决了 但是并不知道是什么原因,左和右盒子难道不是并列关系吗,为什么要换顺序才行。 

总结

到此这篇关于HTML5+CSS设置浮动却没有动反而在中间且错行的文章就介绍到这了,更多相关html css设置浮动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 #HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 #HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 #HTML / CSS
HTML5 Blob对象的具体使用
May 22 #HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 #HTML / CSS
html5用video标签流式加载的实现
May 20 #HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 #HTML / CSS
You might like
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
python实现多线程行情抓取工具的方法
2018/02/28 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
pycharm导入源码的具体步骤
2020/08/04 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
合同专员岗位职责
2013/12/18 职场文书
个人委托书范本
2014/04/02 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
少先队工作总结2015
2015/05/13 职场文书
小学教师教学随笔
2015/08/14 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python