您现在的位置是：网站首页> 编程资料编程资料

HTML5+CSS设置浮动却没有动反而在中间且错行的问题html/css中float浮动的用法实例详解HTML5 CSS3实现七彩变换的天空中白云漂浮动画效果源码html+css 清除浮动的相关技巧心得Html+CSS浮动的广告条实现分解基于jQuery+CSS实现的浮动html菜单效果分享代码

2023-10-11 556人已围观

简介 这篇文章主要介绍了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; }

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

 

左侧盒子并没有左浮动，右侧也没有右浮动。查看源码则显示的为0或者很小的数，就是不是自己设置的数。

解决办法：

将H5中左子盒子和右子盒顺序颠倒，结果测试可行，代码：

 最后的效果如下所示：

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

总结

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

上一篇：html5中嵌入视频自动播放的问题解决html5 video全屏播放/自动播放的实现示例html5自动播放mov格式视频的实例代码解决HTML5中的audio在手机端和微信端的不能自动播放问题HTML5 解决苹果手机不能自动播放音乐问题有关HTML5中背景音乐的自动播放功能HTML5页面音视频在微信和app下自动播放的实现方法HTML5页面音频自动播放的实现方式

下一篇：recorder.js 基于Html5录音功能的实现HTML5录音实践总结(Preact)HTML5网页录音和上传到服务器支持PC、Android，支持IOS微信功能html5录音功能实战示例详解HTML5 录音的踩坑之旅

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网