三栏布局，两边固定，中间自适应

1.浮动

一个左浮动，一个右浮动，中间不用管

            .float .left{
                float: left;
                width: 18.75rem;
                background: red;
            }
            .float .right{
                float: right;
                width: 18.75rem;
                background: red;
            }
            .float .center{
                background: yellow;
            }

2.flex

父级加display:flex，左右不用管，中间加个flex:1

                .flexbox{
                    margin-top: 200px;
                }
 
                .flexbox .left-center-right{
                    display: flex;
                }
                .flexbox .left{
                    width: 18.75rem;
                    background: red;
                }
                .flexbox .center{
                    flex: 1;
                    /* 让中间部分适配整个宽度 */
                    background: yellow;
                }
                .flexbox .right{
                    width: 18.75rem;
                    background: red;
                }

3.绝对定位

左右两栏用绝对定位到两侧，中间用margin或者绝对定位确定位置

            .absolute  .left-center-right>div{
                position: absolute;
            }
            .absolute .left{
                left: 0rem;
                width: 18.75rem;
                background: red;
            }
            .absolute .right{
                right: 0rem;
                width: 18.75rem;
                background: red;
            }
            .absolute .center{
                left: 18.75rem;
                right: 18.75rem;
                background: yellow;
            }

4.margin负值法

首先需要在center元素外部包含一个div

让这个盒子左浮动

        <div id = "wrap">  
            <div id = "center"></div>  
        </div>  
        <div id = "left_margin"></div>  
        <div id = "right_margin"></div>  

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
#left_margin {margin-left: -100%; background-color: lightpink}  
#right_margin{margin-left: -200px;}  

中间盒子一个左右margin值

左右盒子都是左浮动

左盒子magin-100%

右盒子magin-宽度

5.table布局