css 8种方法实现左侧固定右侧自适应

先来看一下最终效果：
左侧固定，右侧自适应
代码：
<!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>左侧固定 右侧自适应</title>
    <style>
       
       .con{
            height:120px;
            background:#ccc;
            margin-bottom:20px;
        }
        .con_l{
             width:200px;
            height:80%;
            background:palegreen;
        }
        .con_r{
            height:100%;
            background:peru;
        }

        /* 1、float + bfc */
        .con1_l{
            float:left;
        }
        .con1_r{
            overflow: hidden;
        }

        /* 2 float + margin-left*/
        .con2_l{
            float:left;
        }
        .con2_r{
            margin-left:200px;
        }

        /* 3 float + padding-left */
        .con3_l{
            float:left;
        }
        .con3_r{
            padding-left:200px;
        }
        .con3_r_con{
            height:100%;
            background:palevioletred;
        }

        /* 4 position */
        .con4{
            position:relative;
        }
        .con4_l{
            position:absolute;
        }
        .con4_r{
            margin-left:200px;
        }

        /* 5 calc */
        .con5_l{
            float:left;
        }
        .con5_r{
            width:calc(100% - 200px);
            float:left;
        }

        /* 6 table-cell */
        .con6{
            display:table;
        }
        .con6_l,.con6_r{
            display:table-cell;
        }

        /* 7 flex */
        .con7{
            display:flex;
        }
        .con7_r{
            flex-grow:1;
        }

        /* 8 grid网格布局 */
        .con8{
            display:grid;
        }
        .con8_l{
            background:palevioletred;
            grid-column:1;
        }
        .con8_r{
            background:plum;
            grid-column:2;
        }

    </style>
</head>
<body>
    <!-- 1、float + bfc -->
    <div class="con">
        <div class="con_l con1_l"></div>
        <div class="con_r con1_r">1、左侧元素浮动，右侧元素添加overflow:hidden，触发bfc，bfc的区域不会与float的元素重叠</div>
    </div>

    <!-- 2、float + margin-left -->
    <div class="con">
        <div class="con_l con2_l"></div>
        <div class="con_r con2_r">2、左侧元素浮动，右侧元素添加margin-left，值为左侧元素的宽度</div>
    </div>

    <!-- 3、float + padding-left -->
    <div class="con">
        <div class="con_l con3_l"></div>
        <div class="con_r con3_r">
            <div class="con3_r_con">3、左侧元素浮动，右侧元素添加子元素，父元素添加padding-left</div>
        </div>
    </div>

    <!-- 4、position -->
    <div class="con con4">
        <div class="con_l con4_l"></div>
        <div class="con_r con4_r">4、左侧元素position定位，0px 0px。右侧元素margin-left:200px;</div>
    </div>

    <!-- 5、css3 calc函数 -->
    <div class="con">
        <div class="con_l con5_l"></div>
        <div class="con_r con5_r">5、使用width:calc（100%-200px)</div>
    </div>

    <!-- 6、table-cell表格布局 -->
    <div class="con con6">
        <div class="con_l con6_l"></div>
        <div class="con_r con6_r">6、使用table-cell表格布局,宽度会被内容撑开。如果宽度不够的话，不会充满浏览器的宽</div>
    </div>

    <!-- 7、flex -->
    <div class="con con7">
        <div class="con_l con7_l"></div>
        <div class="con_r con7_r">7、使用flex布局</div>
    </div>

    <!-- 8、grid 网格布局 -->
    <div class="con con8">
        <div class="con8_l">左边左边左边左边左边左边左边左边</div>
        <div class="con8_r">8、使用grid 网格布局</div>
    </div>
</body>
</html>
蒲公英芽
发布了46 篇原创文章 · 获赞 26 · 访问量 1万+
私信关注
css 8种方法实现 左侧固定右侧自适应

猜你喜欢

css 8种方法实现左侧固定右侧自适应
