左边宽度固定，右边自适应

1.浮动布局
<section>
    <style type="text/css">
        .float_wrap{
        height: 500px;
        }
        .float_wrap .left{
            background: blue;
            width: 200px;
            height:500px;
            float:left;
        }
        .float_wrap .right{ /*右侧不能浮动，而且要与左侧有200的间距*/
            background:red;
            margin-left: 200px;
            height: 500px;
        }
    </style>
    <h1>浮动</h1>
    <article class="float_wrap">
        <div class="left">left</div>
        <div class="right">right</div>
    </article>
</section>

2.flex布局
<section>
    <style type="text/css">
        .flex_wrap{
            display: flex;
        }
        .flex_wrap .left{
            width: 200px;
            height:500px;
            background: blue;
        }
        .flex_wrap .right{
            height: 500px;
            flex: 1;/*自适应部分flex为1*/
            background: red;
        }
    </style>
    <h2>flex</h2>
    <article class="flex_wrap">
        <div class="left">left</div>
        <div class="right">right</div>
    </article>
</section>

3.table布局
<section>
    <style type="text/css">
        .table_wrap{
            display: table;
            width: 100%; 
        }
        .table_wrap .left{
            display: table-cell;
            width: 200px;
            height: 500px;
            background: blue;
        }
        .table_wrap .right{
            display: table-cell;
            height: 500px;
            background: red;
        }
    </style>
    <h2>table</h2>
    <article class="table_wrap">
        <div class="left">left</div>
        <div class="right">right</div>
    </article>
</section>

4.绝对定位布局
<section>
    <style type="text/css">
        .absolute_wrap{
            width: 100%;
            position: relative;
        }
        .absolute_wrap .left{
            width: 200px;
            height: 500px;
            background: blue;
        }
        .absolute_wrap .right{
            height: 500px;
            background: red;
            position: absolute;
            left: 200px;/*关键点*/
            right: 0px; 
            bottom: 0px;
            top:0px;
        }
    </style>
    <h2>absolute</h2>
    <article class="absolute_wrap">
        <div class="left">
            left
        </div>
        <div class="right">right</div>
    </article>
</section>

5.网格布局
<section>
    <style type="text/css">
        .grid_wrap{
            width: 100%;
            display: grid;
            grid-template-rows: 500px;
            grid-template-columns: 200px auto;
        }
        .grid_wrap .left{
            width: 200px;
            background: blue;
        }
        .grid_wrap .right{
            background: red;
        }
    </style>
    <h2>网格布局</h2>
    <article class="grid_wrap">
        <div class="left">
            left
        </div>
        <div class="right">right</div>
    </article>
</section>

比较常规的几种写法。一开始有点不屑，觉得太简单。但是真的写的时候还是发现了点问题。比如第一种的浮动布局，总感觉不是太满意。右边的宽度总是会占在左边。

最后发现网格布局相当好用，但是兼容性应该和flex差不多，只能支持高级浏览器。

转载于:https://www.cnblogs.com/cyr2018/p/10871322.html