面试回答

1、左右固定中间自适应

html部分

<div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

css部分

<style>
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .container {
        height: 100%;
        padding: 0px 200px;
    }

    .left,
    .right,
    .center {
        float: left;
    }

    .center {
        width: 100%;
        height: 400px;
        background-color: seagreen;
    }

    .left {
        width: 200px;
        height: 400px;
        background-color: sandybrown;
        margin-left: calc(-100% - 200px);
    }

    .right {
        width: 200px;
        height: 400px;
        background-color: sandybrown;
        margin-right: -100%;
    }
</style>

2、flex布局的方式

html部分

<div class="container">
    <div class="left"></div>
    <div class="center">
        中间
    </div>
    <div class="right"></div>
</div>

css部分

<style>
    .container {
        display: flex;
        justify-content: space-between;
    }

    .center {
        flex: 1;
        background-color: seagreen;
        height: 400px;
    }

    .left,
    .right {
        flex: 0 0 200px;
        background-color: sienna;
        height: 400px;
    }
</style>

3、定位的方式

html部分

<div class="container">
    <div class="left"></div>
    <div class="center">
        中间
    </div>
    <div class="right"></div>
</div>

css部分

<style>
    .container {
        position: relative;
    }

    .center {
        background-color: springgreen;
        height: 400px;
        margin: 0 200px;
    }

    .left {
        position: absolute;
        width: 200px;
        height: 400px;
        top: 0px;
        left: 0px;
        background-color: tan;
    }
    .right{
        position: absolute;
        width: 200px;
        height: 400px;
        top: 0px;
        right: 0px;
        background-color: tan;
    }
</style>

后记

css中一般不使用计算表达式，性能不好