div布局

用css实现如下效果：有三列div，两边两列固定宽200px，中间宽自适应，三列高度被内容撑开，并且始终与最高div那列的高度保持一致。

• 方法1-flex布局

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        display: flex;
    }
    .left{
        width: 200px;
        background: rgba(59, 66, 128, 0.62);
    }
    .center{
        flex: 1;/*把所有空白位置都占据了！！！！*/
        background: rgba(59, 109, 40, 0.62);
        height: 300px;
    }
    .right{
        width: 200px;
        background: rgba(218, 145, 110, 0.89);
    }
</style>
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

• 方法2-使用定位和margin的方法

<style>
    * {
        padding: 0;
        margin: 0;
    }

    h3 {
        margin: 20px 0 0;
    }

    .box {
        position: relative;
    }

    .left, .right {
        width: 200px;
        background-color: #ffe6b8;
        position: absolute;
        top: 0px;
    }

    .left {
        left: 0px;
    }

    .right {
        right: 0px;
    }

    .center {
        margin: 0px 200px;
        background-color: #eee;
    } 
</style>
<h3>实现三列宽度自适应布局</h3>
<div class="box">
    <div class="left">我是左边</div>
    <div class="right">我是右边</div>
    <div class="center">我是中间</div>
</div>

也可以是浮动过去的！（浮动和定位一样的 效果）
注：h没有办法自适应最高的那一列；对比来说，还是flex布局好一些

• 方法3-overflow：hidden布局（BFC）

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .box{

    }
    .left{
        width: 200px;
        float: left;
        background: #d29a97;
    }
    .right{
        width: 200px;
        float: right;
        background: #9bb9d2;
    }
    .center{
        overflow: hidden;
        background: #8ed292;
        height: 200px;
    }

</style>

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

注：html的写法：浮动的盒子要在overflow的盒子上面，顺序变了就不生效的！！！
缺点：h没有自适应