大家先看下效果圖
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <style type="text/css"> .box{ width: 1200px; } .box1{ width: 830px; height: 100px; float: left; background-color: red; } .box2{ width: 300px; height: 100px; float: right; background-color: blue; } </style> <body> <div class="box"> <div class="box1"> <div class="box1"> </div><div class="box1"> </div> </div> <div class="box2"> </div> </div> </body> </html>
碰到這種問題的時候怎么辦呢？？小編找了到了一個方法，用浮動定位
思路：
1、給box一個絕對定位position：relative;
2、給box2一個相對定位position：absolute;
3、讓相對定位，定位到你想讓box2去的位置，就可以啦！
如果大家有更好的辦法可以在下方評論，多多建議，謝謝
（注：轉載請注明出處）