左右布局:左边定宽、右边自适应,3种实现方法

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左右布局:左边定宽、右边自适应3种方法</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            color: #fff;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            box-sizing: border-box;
        }
        .box-left {
            width: 200px;
            height: 200px;
            padding-top: 75px;
            background: #5A6A94;
        }
        .box-right {
            height: 200px;
            padding-top: 75px;
            background: #BE4F4F;
        }
        
        /*实现方法一*/
        .left{
            float: left;
        }
        .right{
            width: 100%;
        }

        /*实现方法二*/
        /*body{
            display: flex;
        }
        .right{
            flex: 1;
        }*/

        /*实现方法三*/
       /* .left{
            float: left;
        }
        .right{
            float: left;
            width: calc(100vw - 200px);
        }*/

    </style>
</head>
<body>

    <div class="box-left left">Left</div>
    <div class="box-right right">Right</div>
</body>
</html>

演示地址:预览

发表新评论