关于css左右布局的那些事

前段时间被面试问道左右布局的问题，今天就来亲自试验下，看看有多少种方法。

问：左边固定像素，右边宽度自适应，并且父级元素的高度是由左边或右边的高度撑开的。

<div class="main">
    <div class="left" contenteditable="true">
        左侧内容
    </div>
    <div class="right" contenteditable="true">
        右侧内容
    </div>
</div>

达到类似如下效果

左侧高时.png
右侧高时.png

• 首先是想到的flex布局

    .main {
        width: 100%;
        display: flex;
        border: 1px solid red;
    }

    .left {
        width: 300px;
        flex: none;
        border-right: 1px solid red;
    }

    .right {
        width: 100%;
    }

flex布局可以轻而易举的实现效果

• 然后是浮动float

    .main {
        width: 100%;
        overflow: hidden;
        border: 1px solid red;
    }

    .left {
        width: 300px;
        float: left;
        border-right: 1px solid red;
    }

    .right {
        margin-left: 300px;
        border-left: 1px solid red;
    }

浮动布局可以将父元素撑开，但是左右两个子元素并不互相影响高度，所以中间那条线，是左边和右边一个边框重叠的效果。但如果需要两个子元素有不同的背景颜色的话，就不是这样的写法了。
浮动如果是子元素带背景，我是如下写法

    .main {
        width: 100%;
        overflow: hidden;
        border: 1px solid red;
        position: relative;
    }
    .main:before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 300px;
        background: orangered;
        z-index: -1;
    }
    .main:after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 300px;
        right: 0;
        background: yellow;
        z-index: -1;
    }

    .left {
        width: 300px;
        float: left;
        background: orangered;
        border-right: 1px solid red;
    }

    .right {
        margin-left: 300px;
        background: yellow;
        border-left: 1px solid red;
    }

浮动带背景时

• 行内块元素 display:inline-block

    .main {
        width: 100%;
        border: 1px solid red;
        font-size: 0;
    }

    .left {
        width: 300px;
        display: inline-block;
        border-right: 1px solid red;
        font-size: 14px;
    }

    .right {
        display: inline-block;
        border-left: 1px solid red;
        height: 100%;
        width: calc(100% - 301px);
        font-size: 14px;
        vertical-align: top;
        margin-left: -1px;
    }

行内块元素如果要给子元素加背景参考浮动即可。

• 表格或display:table

    .main {
        width: 100%;
        border: 1px solid red;
        display: table;
    }

    .left {
        width: 300px;
        display: table-cell;
        border-right: 1px solid red;
        background: aquamarine;
    }

    .right {
        display: table-cell;
        background: antiquewhite;
    }

类表格的布局应该说是比较简单的，也适用子元素带背景的。

• grid网格布局

    .main {
        width: 100%;
        border: 1px solid red;
        display: grid;
        grid-template-columns: 300px auto;
    }

    .left {
        border-right: 1px solid red;
        background: aquamarine;
    }

    .right {
        background: antiquewhite;
    }

grid布局的写法那就更简单了，只需要在父级元素定义grid即可。

table和grid效果图.png