解决两个div的浮动问题

本文转载自查看原文 2020-05-09 10:25 680

大家先看下效果图

<!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去的位置，就可以啦！

如果大家有更好的办法可以在下方评论，多多建议，谢谢

（注：转载请注明出处）

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Html 两个DIV并排的问题浅谈对BFC的认识，以及用bfc解决浮动问题解决IOS滑动页面fixed浮动问题 html中的浮动问题 element中el-row的for循环展示遇到的浮动问题和div中用span，文字不在div内横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法解决多个div左浮动后不换行问题 latex 插入表格以及图片的浮动问题《CSS布局中浮动问题的四种解决方案》 Android两级嵌套ListView滑动问题的解决