如何用CSS实现中间自适应，两边定宽三栏布局

1.前言

用css实现“两边定宽，中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了，一般当面试者写出一种实现方法之后，面试官还会问你还有没有别的方法，尽量多的写出几种实现方法。

2.实现原理

要想实现这种“两边定宽，中间自适应的三栏布局”其实也不难，无外乎把握住以下几点：

• 要想中间自适应，那么中间的div不能设置宽度width，这样宽度就会随着浏览器窗口自适应。
• 由于div是块级元素，要想三个div处于同一行，那么两边的div就要脱离文档流。
• CSS3的flex伸缩布局。
• 表格table布局。
• 网格布局。

3.具体实现

下面就按照上面所说的实现原理，列举以下几种实现方式：

3.1 浮动解决方案

<style>
        .layout-float .right{
            float: right;
            width: 300px;
            height: 100px;
            background-color: red;
        }
        .layout-float .left{
            float: left;
            width: 300px;
            height: 100px;
            background-color: blue;
        }
        .layout-float .center{
            height: 100px;
            background-color: yellow;
        }
</style>
<div class="right"></div>
<div class="left"></div>
<div class="center"><h1>浮动解决方案</h1></div>

3.2 绝对定位解决方案

<style>
        .layout-absolute .right{
            width: 300px;
            height: 100px;
            right: 0px;
            position: absolute;
            background-color: red;
        }
        .layout-absolute .left{
            width: 300px;
            height: 100px;
            left: 0px;
            position: absolute;
            background-color: blue;
        }
        .layout-absolute .center{
            left: 300px;
            right: 300px;
            height: 100px;
            position: absolute;
            background-color: yellow;
        }
</style>
<div class="left"></div>
<div class="center"><h1>绝对定位解决方案</h1></div>
<div class="right"></div>

3.3 Flex伸缩布局解决方案

<style>
        .layout-flex .left-center-right{
            display: flex;
        }
        .layout-flex  .left-center-right .left{
            width: 300px;
            height: 100px;
            background-color: blue;
        }
        .layout-flex  .left-center-right .center{
            flex: 1;
            background-color: yellow;
        }
        .layout-flex  .left-center-right .right{
            width: 300px;
            height: 100px;
            background-color: red;
        }
</style>
<div class="left-center-right">
    <div class="left"></div>
    <div class="center"><h1>Flex伸缩布局解决方案</h1></div>
    <div class="right"></div>
</div>

3.4 表格布局解决方案

<style>
        .layout-table .left-center-right{
            width: 100%;
            display: table;
            height: 100px;
        }
        .layout-table .left-center-right>div{
            display: table-cell;
        }
        .layout-table .right{
            width: 300px;
            height: 100px;
            background-color: red;
        }
        .layout-table .left{
            width: 300px;
            height: 100px;
            background-color: blue;
        }
        .layout-table .center{
            height: 100px;
            background-color: yellow;
        }
</style>
<div class="left-center-right">
    <div class="left"></div>
    <div class="center"><h1>表格布局解决方案</h1></div>
    <div class="right"></div>
</div>

3.5 网格布局解决方案

<style>
        .layout-grid .left-center-right{
            width: 100%;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }
        .layout-grid .right{
            background-color: red;
        }
        .layout-grid .left{
            background-color: blue;
        }
        .layout-grid .center{
            background-color: yellow;
        }
</style>
<div class="left-center-right">
    <div class="left"></div>
    <div class="center"><h1>网格布局解决方案</h1></div>
    <div class="right"></div>
</div>

4. 效果图

 （完）