css布局之左边定宽右边宽度自适应的六种方法

1、方法一：采用浮动布局的方法，左边浮动，右边加上margin-left的值，同时可以设置最小高度值，当内容超出该值时，会自动以等高的方式增高。

代码如下：

<div class="left">
    <h1>Left</h1>
</div>
<div class="right">
    <h1>Right</h1>
</div>

 * {
            margin: 0;
            padding: 0;
        }
        .left {
            float: left;
            width: 200px;
            min-height: 200px;
            background: greenyellow;
        }
        .right {
            margin-left: 200px;
            min-height: 200px;
            background: lightpink;
        }

效果如下所示：

2、方法二：左边设置左浮动，右边设置宽度100%来实现。

* {
            margin: 0;
            padding: 0;
        }
        .left {
            float: left;
            width: 200px;
            min-height: 200px;
            background: greenyellow;
        }
        .right {
            width: 100%;
            min-height: 200px;
            background: lightpink;
        }

3、方法三：采用左浮动和负边距的方法实现。效果如上图所示：

    * {
            margin: 0;
            padding: 0;
        }
        .left {
            float: left;
            width: 200px;
            min-height: 200px;
            margin-right: -100%;
            background: greenyellow;
        }
        .right {
            float: left;
            width: 100%;
            margin-left: 200px;
            min-height: 200px;
            background: lightpink;
        }

4、方法四：使用flex布局方法。

 * {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
        }
        .left {
            width: 200px;
            min-height: 200px;
            background: greenyellow;
        }
        .right {
            flex:1;
            min-height: 200px;
            background: lightpink;
        }

5、利用calc函数动态计算函数值的方法：

 * {
            margin: 0;
            padding: 0;
        }

        .left {
            float:left;
            width:200px;
            min-height: 200px;
            background: greenyellow;
        }
        .right {
            float:left;
            width:calc(100vw - 200px);
            min-height: 200px;
            background: lightpink;
        }

6、使用绝对定位布局：

 * {
            margin: 0;
            padding: 0;
        }
        .left {
            position: absolute;
            left:0;
            width: 200px;
            min-height: 200px;
            background: greenyellow;
        }
        .right {
            position: absolute;
            left:200px;
            width: 100%;
            min-height: 200px;
            background: lightpink;
        }