01 三栏布局，左右两列定宽，中间列自适应

实现方法

方法一：推荐使用flex布局

 /* 三栏布局，左右两列定宽，中间列自适应 display:flex  和flex:1 */

        .container{
            display: flex;
            height: 300px;
        }

        .left{
            width: 200px;
            background-color: rebeccapurple;
        }
        .center{
            background-color: aqua;
            flex: 1;
        }
        .right{
            width: 200px;
            background-color: blue;
        }

<div class="container">
        <div class="left">left</div>   
        <div class="center">
            gggggggggggggggggggggggggggggggggggggggggggggd
            fsdfsgfgfdgfdgfg

        </div>
        <div class="right">right</div>
    </div>

/* 三栏布局，左右两列定宽，中间列自适应 float+margin*/
        .container{
            height: 40px;
        }

        .left{
            float: left;
            width: 200px;
            background-color: rebeccapurple;
        }
        
        .right{
            float: right;
            width: 200px;
            background-color: blue;
        }
        .center{
            background-color: aqua;
            margin-left: 200px;
            margin-right: 200px;
        }

<div class="container">
        <div class="left">左边</div>  
        <div class="right">右边</div>
        <div class="center">
            <div>
                中间
            ggggggggggggggggg
            ggggggggggggggggggggggggggggdfsdfsgfgfdg
            fdgfg
            </div>
            
        </div>
    </div>

 /* 三栏布局，左右两列定宽，中间列自适应 float+overflow的bfc */
        .container{
            height: 40px;
        }
        .left{
            width: 200px;
            background-color: rebeccapurple;
            float: left;
        }       
        .right{
            width: 200px;
            float: right;
            background-color: blue;
        }
        .center{
            background-color: aqua;
            overflow: hidden;
        }

<div class="container">
        <div class="left">左边</div>  
        <div class="right">右边</div>
        <div class="center">
            中间
            ggggggggggggggggg
            ggggggggggggggggggggggggggggdfsdfsgfgfdg
            fdgfg
        </div>
    </div>

/* 三栏布局，左右两列定宽，中间列自适应 display:table 和table-cell */

        .container{
            display: table;
            height: 200px;
        }

        .left{
            width: 200px;
            background-color: rebeccapurple;
            display: table-cell;
        }
        .center{
            background-color: aqua;
            display: table-cell;
        }
        .right{
            width: 200px;
            display: table-cell;
            background-color: blue;
        }
 <div class="container">
        <div class="left">left</div>   
        <div class="center">
            <div>
                gggggggggggggggggg
                gggggggggggggggggggggggggggd
                fsdfsgfgfdgfdgfg

            </div>
        </div>
        <div class="right">right</div>
    </div>

/* 三栏布局，左右两列定宽，中间列自适应 position:relative 和absolute */

        .container{
            height: 300px;
            position: relative;
        }

        .left{
            position: absolute;
            width: 200px;
            left: 0;
            background-color: rebeccapurple;
        }
        .center{
            margin-left: 200px;
            margin-right: 200px;
            background-color: aqua;
        }
        /* 或者
        .center{
            position: absolute;
            left: 200px;
            right: 200px;
            background-color: aqua;
        } */
        .right{
            position: absolute;
            width: 200px;
            right: 0;
            background-color: blue;
        }
        
<div class="container">
        <div class="left">left</div>         
        <div class="right">right</div>
        <div class="center">
            gggggggggggggggggggggggggggggggggggggggggggggd
            fsdfsgfgfdgfdgfg
        </div>
    </div>

/* 三栏布局，左右两列定宽，中间列自适应 圣杯布局 */

        .container{
            height: 300px;
            margin-left: 200px;
            margin-right: 200px;
        }

        .main{
            float: left;
            width: 100%;
            background-color: red;

        }

        .left{
            float: left;
            width: 200px;
            margin-left: -100%;
            background-color: rebeccapurple;

            position: relative;
            left: -200px;
        }
        
        .right{
            float: left;
            width: 200px;
            margin-left: -200px;
            background-color: blue;

            position: relative;
            right: -200px;
        }
<div class="container">
        <div class="main">
            gggggggggggggggggggggggggggggggggggggggggggggd
            fsdfsgfgfdgfdgfg
        </div>
        <div class="left">left</div>         
        <div class="right">right</div>
       
    </div>

 /* 三栏布局，左右两列定宽，中间列自适应 双飞翼布局 */
   

        .container{
            height: 300px;
        }
        .main{
            float: left;
            width: 100%;        
        }

        .content{
            margin-left: 200px;
            margin-right: 200px;
            background-color: red;
        }

        .left{
            float: left;
            width: 200px;
            margin-left: -100%;
            background-color: rebeccapurple;

           
        }
        
        .right{
            float: left;
            width: 200px;
            margin-left: -200px;
            background-color: blue;

           
        }

<div class="container">
        <div class="main">
            <div class="content">
                gggggggggggggggggggggggggggggggggggggggggggggd
                fsdfsgfgfdgfdgfg
            </div>
           
        </div>
        <div class="left">left</div>         
        <div class="right">right</div>
       
    </div>