左边固定，右边自适应的七种方法

最新推荐文章于 2024-05-06 09:28:31 发布

mango93

最新推荐文章于 2024-05-06 09:28:31 发布

阅读量4.4k

点赞数 2

本文链接：https://blog.csdn.net/qq_43633937/article/details/94064804

版权

给左边div设置float:left，给右边div设置margin-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            overflow: hidden;
            border: 1px solid #000;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .right {
            margin-left: 200px;
            height: 150px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

左边div绝对定位，右边div设置margin-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            height: 200px;
            border: 1px solid #000;
        }
        .left {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 100%;
            background-color: green;
        }
        .right {
            margin-left: 200px;
            height: 150px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

给父盒子设置display:table，给子盒子设置display:table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            display: table;
            width: 100%;
            border: 1px solid #000;
        }
        .left {
            display: table-cell;
            width: 200px;
            height:200px;
            background-color: green;
        }
        .right {
            display: table-cell;
            height: 150px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

双float + calc()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            overflow: hidden;
            border: 1px solid #000;
        }
        .left {
            float: left;
            width: 200px;
            height:200px;
            background-color: green;
        }
        .right {
            float: left;
            width: calc(100% - 200px);
            height: 150px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

双inline-block + calc()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            box-sizing: content-box;
            border: 1px solid #000;
            font-size: 0;
        }
        .left,
        .right {
            display: inline-block;
            vertical-align: top;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .right {
            width: calc(100% - 200px);
            height: 150px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

为了准确地应用计算出来的宽度，需要消除div之间的空格，需要通过设置父容器的font-size: 0，或者用注释消除html中的空格等方法
6. float + BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            overflow: auto;
            border: 1px solid #000;
        }
        .left {
            float: left;
            width: 200px;
            height:200px;
            background-color: green;
        }
        .right {
            overflow: auto;
            height: 150px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            border: 1px solid #000;
        }
        .left {
            flex: 0 0 200px;
            height: 200px;
            background-color: green;
        }
        .right {
            flex: 1;
            height: 150px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左边固定</div>
        <div class="right">右边自适应</div>
    </div>
</body>
</html>

mango93

关注

2
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
左边固定，右边自适应的七种方法

给左边div设置float:left，给右边div设置margin-left左边div绝对定位，右边div设置margin-left给父盒子设置display:table，给子盒子设置display:table-cell
复制链接

扫一扫