三列布局（定宽+自适应+定宽）

一.float+margin+fix
即：所有元素float:left，container设置overflow:hidden(显示部分文字)，center-box设置左右margin=-a.width,-b.width,center设置左右margin=a.width，b.width

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

<style>
        html,body{
            width: 100%;
            height: 100%;
            margin:0;
            border:0;
            padding:0;
        }
        .container{
            width: 100%;
            height: 100%;
            overflow:hidden;
        }
        .left,.right{
            /*position:relative;*/
            float:left;
            width: 100px;
            height: 100%;
        }
        .center-box{
            float:left;
            width: 100%;
            height: 100%;
            margin:0 -100px;
        }
        .center{
            width: 100%;
            height: 100%;
            margin:0 100px;
            background:green;
        }
        .left{
            background:yellow;
        }
        .right{
            background:red;
        }
    </style>

二. inline-block+margin+fix
即：将所有元素display:inline-block;其他同一。

<style>
        html,body{
            width: 100%;
            height: 100%;
            margin:0;
            border:0;
            padding:0;
        }
        .container{
            width: 100%;
            height: 100%;
            font-size:0;
            overflow:hidden;
        }
        .left,.right,.center-box{
            /*position:relative;*/
            display:inline-block;
        }
        .left,.right{
            width: 100px;
            height: 100%;
        }
        .center-box{
            width: 100%;
            height: 100%;
            margin:0 -100px;
        }
        .center{
            width: 100%;
            height: 100%;
            margin:0 100px;
            background:green;
        }
        .left{
            background:yellow;
        }
        .right{
            background:red;
        }
    </style>

三.table+table-cell()

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

 <style>
        html,body{
            width: 100%;
            height: 100%;
            margin:0;
            border:0;
            padding:0;
        }
        .container{
            width: 100%;
            height: 100%;
            display:table;
        }
        .left,.right{
            /*position:relative;*/
            display:table-cell;
            width: 100px;
            height: 100%;
        }
        .center{
            display:table-cell;/*没有margin属性*/
            height: 100%;
            background:green;
        }
        .left{
            background:yellow;
        }
        .right{
            background:red;
        }
    </style>

四.absolute

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

<style>
        html,body{
            width: 100%;
            height: 100%;
            margin:0;
            border:0;
            padding:0;
        }
        .container{
            width: 100%;
            height: 100%;
            position:relative;
        }
        .center{
            position:absolute;
            right:100px;
            left:100px;
            height: 100%;
            background:green;
        }
        .left{
            position:absolute;
            left:0;
            width: 100px;
            height: 100%;
            background:yellow;
        }
        .right{
            position:absolute;
            right:0;
            width: 100px;
            height: 100%;
            background:red;
        }
    </style>

五.flex

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

<style>
        html,body{
            width: 100%;
            height: 100%;
            margin:0;
            border:0;
            padding:0;
        }
        .container{
            width: 100%;
            height: 100%;
            display:flex;
        }
        .center{
            flex:1;
            height: 100%;
            background:green;
        }
        .left{
            width: 100px;
            height: 100%;
            background:yellow;
        }
        .right{
            width: 100px;
            height: 100%;
            background:red;
        }
    </style>