左边固定，中间自动适应，右边固定

左边固定，中间自动适应，右边固定

方法一：float+padding +顺序

利用div块是块级元素，占自动占满一整行
利用float浮动的原理来做左边固定的容器，右边固定的容器
利用padding+box-sizing: border-box给div块级元素左右两边腾出左右固定的空间，
利用顺序是因为float与div块的性质
【浮动在当前行，脱离原来文本，进入到新的一层（浮动层），然后在设定的方向（左右）移动，直到遇到父级盒子的边缘，或者其他浮> 动块的边缘停止,且当一行没有足够空间存放所有浮动块时，多出来的盒子会挤到下一行，然后按照设定的方向继续移动，直到遇到父级> 盒子的边缘或其他浮动块的边缘】

代码如下：

        <div style="width:100%">
            <div style="width:100px;height: 200px;background-color: red;float:left;"></div>
            <div style="width:100px;height: 200px;background-color: green;float:right;"></div>
            <div style="width:100%;height: 200px;background-color:yellow;padding:0 100px;box-sizing: border-box;"></div>
        </div>

方法二：position+padding

利用position定位固定容器位置
padding+box-sizing:border-box;给容器腾出固定容器的位置

代码如下：

.main{
           width:100%;
           height: 200px;
           position: relative;
           background-color: yellow;
           padding:0 100px;
           box-sizing: border-box;;
       }
       .lf{
           width:100px;
           height: 100%;
           position: absolute;
           left:0;
           top: 0;
           background-color: teal;
       }
       .center{
           width: 100%;
           height: 100%;
           background-color: tomato;
       }
       .rt{
           width:100px;
           height: 100%;
           background-color: teal;
           position: absolute;
           top:0;
           right: 0;
       }


    <div class="main">
        <div class="lf">left</div>
        <div class="center">center</div>
        <div class="rt">right</div>
    </div>

方法三：flex

利用flex的三个属性 flex-grow：放大,flex-shrink：缩小,flex-basis：子元素长度

代码如下：

.main-flex{
           width:100%;
           height: 200px;
           display: flex;
       }
       .lf-flex,.rt-flex{
           height: 100%;
           flex:0 0 100px;
           background-color: teal;
       }
       .center-flex{
           width:100%;
           height: 100%;
           flex:auto;
           background-color: tomato;
       }
   <div class="main-flex">
        <div class="lf-flex">left</div>
        <div class="center-flex">center</div>
        <div class="rt-flex">right</div>
    </div>

方法四：display:table 表格布局 代码如下：

       .main-display-table{
           width:100%;
           height: 200px;
           display: table;
       }
       .main-display-table div{
           width: 100px;
           height: 100%;
           display: table-cell;
           background-color: teal;
       }
       .main-display-table div:nth-child(2){
        width: auto;
        height:100%;
        background-color: tomato;
       }

    
   
<div class="main-display-table">
    <div class="lf-display-table">left</div>
    <div class="center-display-table">center</div>
    <div class="rt-display-table">right</div>
</div>

方法五：网格布局 grid

.main-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 200px;
}
.main-grid>div{
    background-color: teal;
}
.main-grid>div:nth-child(2){
    background-color: tomato;
}


<div class="main-grid">
    <div>left</div>
    <div>center</div>
    <div>right</div>
</div>