小編給大家分享一下HTML5+CSS怎么解決設(shè)置浮動卻沒有動反而在中間且錯行的問題,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
今天按照網(wǎng)上例程寫小米官網(wǎng),結(jié)果發(fā)現(xiàn)
這一部分 設(shè)置一個父盒子 然后子盒子分別設(shè)置左右浮動 ,代碼如下:
.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; }
結(jié)果出現(xiàn)的效果是下面這樣的:
左側(cè)盒子并沒有左浮動,右側(cè)也沒有右浮動。查看源碼則顯示的為0或者很小的數(shù),就是不是自己設(shè)置的數(shù)。
解決辦法:
將H5中左子盒子和右子盒順序顛倒,結(jié)果測試可行,代碼:
最后的效果如下所示:
雖說問題解決了 但是并不知道是什么原因,左和右盒子難道不是并列關(guān)系嗎,為什么要換順序才行。
看完了這篇文章,相信你對“HTML5+CSS怎么解決設(shè)置浮動卻沒有動反而在中間且錯行的問題”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!