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使用技巧5个
Apr 02 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 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
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
php简单截取字符串代码示例
2016/10/19 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
详解Python是如何实现issubclass的
2019/07/24 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
园林资料员岗位职责
2013/12/30 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
党员剖析材料范文
2014/12/18 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2016教师节问候语
2015/11/10 职场文书