css 4种方法实现左右两侧固定中间自适应布局

先来看一下最终效果：
左右两侧固定，中间自适应
代码：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .con{
            height:200px;
            background:#ccc;
            margin-bottom:10px;
        }
        .con_l,.con_r{
            width:200px;
            height:80%;
        }
        .con_l{
            background:plum;
        }
        .con_r{
            background:saddlebrown;
        }
        .con_c{
            height:100%;
            background:slateblue;
        }
        /* 1. float + bfc */
        .con1_l{
            float:left;
        }
        .con1_r{
            float:right;
        }
        .con1_c{
            overflow: hidden;
        }
        /* 2. float + padding*/
        .con2_l{
            float:left;
        }
        .con2_r{
            float:right;
        }
        .con2_c{
            padding:0px 200px;
        }
        .con2_c_con{
            height:100%;
            background:teal;
        }
        /* 3 float + margin  */
        .con3_l{
            float:left;
        }
        .con3_r{
            float:right;
        }
        .con3_c{
            margin:0px 200px;
        }
        /* 4 position */
        .con4{
            position:relative;
        }
        .con4_l{
            position:absolute;
        }
        .con4_r{
            position:absolute;
            right:0px;
        }
        .con4_c{
            margin:0px 200px;
        }
    </style>
</head>
<body>
    <!-- 1、float + bfc -->
    <div class="con">
        <div class="con_l con1_l">左侧左侧左侧左侧左侧左侧</div>
        <div class="con_r con1_r">右侧右侧右侧右侧右侧右侧</div>
        <div class="con_c con1_c">中间中间中间中间中间中间</div>
    </div>
    <!-- 2 float + padding-->
    <div class="con">
        <div class="con_l con2_l">左侧左侧左侧左侧左侧左侧</div>
        <div class="con_r con2_r">右侧右侧右侧右侧右侧右侧</div>
        <div class="con_c con2_c">
            <div class="con2_c_con">中间中间中间中间中间中间</div>
        </div>
    </div>
     <!-- 3、float + margin -->
     <div class="con">
        <div class="con_l con3_l">左侧左侧左侧左侧左侧左侧</div>
        <div class="con_r con3_r">右侧右侧右侧右侧右侧右侧</div>
        <div class="con_c con3_c">中间中间中间中间中间中间</div>
    </div>
     <!-- 4、position -->
     <div class="con con4">
        <div class="con_l con4_l">左侧左侧左侧左侧左侧左侧</div>
        <div class="con_r con4_r">右侧右侧右侧右侧右侧右侧</div>
        <div class="con_c con4_c">中间中间中间中间中间中间</div>
    </div>
</body>
</html>

没有写太多的原理，看不懂的话，可以看上一篇文章，《css 8种方法实现左侧固定右侧自适应》，链接：https://blog.csdn.net/Charissa2017/article/details/103840885

蒲公英芽

发布了46 篇原创文章 · 获赞 26 · 访问量 1万+

私信关注

css 4种方法实现左右两侧固定 中间自适应布局

猜你喜欢

css 4种方法实现左右两侧固定中间自适应布局