关于css:CSS两栏布局

布局是面试中和理论开发中常常遇到的问题，常见的有两栏布局、三栏布局等。想起来之前的一次某团的面试，要求用尽可能多的办法实现左侧固定宽度、右侧自适应的两栏布局，现整顿一份最常见的实现两栏布局的几种办法，简略易懂，可作为前端面试筹备材料。

0.HTML 构造如下：

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

1. 利用浮动 float

    <style>
        .main {overflow: hidden;}
        .left {
            /* 左栏设置左浮动 */
            float: left;
            width: 400px;
            height: 500px;
            background: red;
        }
        .right {
            /* 右栏设置一个左外间距，值为左栏的宽度 */
            margin-left: 400px;
            background: blue;
            height: 500px;
        }
    </style>

2. 利用定位 position

    <style>
        /* 子绝父相 */
        .main {
            overflow: hidden;
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            top: 0;
            width: 400px;
            height: 500px;
            background: red;
        }
        .right {
            /* 右栏设置一个左外间距，值为左栏的宽度 */
            margin-left: 400px;
            height: 500px;
            background: blue;
        }
    </style>

3. 利用弹性布局 flex

    <style>
        .main {display: flex;}
        .left {
            height: 500px;
            background: red;
            flex: 0 0 400px
        }
        .right {
            background: blue;
            height: 500px;
            flex: 1;
        }
    </style>

4. 利用表格布局 table

    <style>
        .main {
            display: table;
            width: 100%;
        }
        .left {
            display: table-cell;
            width: 400px;
            height: 500px;
            background: red;
        }
        .right {
            display: table-cell;
            background:blue;
            height: 500px;
        }
    </style>

【作者程度无限，欢送大家在评论区交换斧正~】