css布局左右2边固定，中间自适应

1.position+margin
原理说明：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。

<style>
    .left, .right {
        position: absolute;
        top: 0;
        width: 200px;
        height:40px;
        background: red;
    }
    .left {
        left: 0;
    }
    .right {
        right: 0;
    }
    .main {
        margin: 0 200px;
        height:40px;
        background: #000;
    }
</style>
<div id="bd">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

2.float+margin

<style>
    .left,.right{
        height:40px;
        background: yellow;
    }
    .left {
        width: 100px;
        float: left;
    }
    .right {
        width: 200px;
        float: right;
    }
    .main {
        margin-left: 100px;
        margin-right: 200px;
        height:40px;
        background: #000;
    }

</style>
<div id="bd">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

3.圣杯布局（float+margin+padding+position:relative）

<style>
    #bd {
        padding: 0 230px 0 190px;
        height:40px;
        width:100%;
        box-sizing: border-box;
    }
    .main {
        float: left;
        width: 100%;
        height:40px;
        background: #000;
    }
    .left {
        float: left;
        width: 190px;
        margin-left: -100%;
        position: relative;
        left: -190px;
        height:40px;
        background: red;
    }
    .right {
        float: left;
        width: 230px;
        margin-left: -230px;
        position: relative;
        right: -230px;
        height:40px;
        background: yellow;
    }

</style>
<div id="bd">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

布局步骤:

• 三者都设置向左浮动。
• 设置main宽度为100%，设置两侧栏的宽度。
• 设置 负边距，left设置负左边距为100%，right设置负左边距为负的自身宽度。
• 设置main的padding值给左右两个子面板留出空间。
• 设置两个子面板为相对定位，left的left值为负的left宽度，right的right值为负的left宽度。

4.双飞翼布局（float+margin）

<style>
    #main-wrap {
        float: left;
        width: 100%;
        background: #000;
    }
    #main {
        margin: 0 230px 0 190px;
    }
    .sub {
        float: left;
        width: 190px;
        margin-left: -100%;
        background: yellow;
    }
    .extra {
        float: left;
        width: 230px;
        margin-left: -230px;
        background: red;
    }
   
</style>
<div id="main-wrap" class="column">
    <div id="main">#main</div>
</div>
<div class="sub">left</div>
<div class="extra">right</div>

布局步骤:

• 三者都设置向左浮动。
• 设置main-wrap宽度为100%，设置两个侧栏的宽度。
• 设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
• 设置main的margin值给左右两个子面板留出空间。

5.flex

<style>
    #bd{display: flex}
    .left,.right{
        height:40px;
        background: yellow;
    }
    .left {
        width: 100px;
    }
    .right {
        width: 200px;
    }
    .main {
        height:40px;
        background: #000;
        flex:1;
    }

</style>
<div id="bd">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>