css实现左侧固定，右边自适应的方法

欢迎加入qq群(IT-程序猿-技术交流群)：757345416

html部分：

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

方法一：

        .box{
            display: flex;
        }
        .left{
            flex:0 1 100px;
            background: #090;
        }
        .right{
            flex:1;
            background: #099;
        }

方法二：

        .left{
            width: 100px;
            background: #090;
            float: left;
        }
        .right{
            overflow: hidden;
            background: #099;
        }

方法三：

        .left{
            width: 100px;
            background: #090;
            float: left;
        }
        .right{
            margin-left: 100px;
            background: #099;
        }

方法四：

        .box{
            position: relative;
        }
        .left{
            position: absolute;
            left: 0;
            top:0;
            width: 100px;
            background: #090;
        }
        .right{
            margin-left:100px;
            background: #099;
        }

方法五：

        .box{
            position: relative;
        }
        .left{
            position: absolute;
            left: 0;
            top:0;
            width: 100px;
            background: #090;
        }
        .right{
            position: absolute;
            left: 100px;
            top:0;
            right: 0;
            width: 100%;
            background: #099;
        }

五种方法实现的功能是一样的，效果图如下：

本文中到此结束，希望对你的学习有帮助！