两边固定，中间自适应

运用float,左右浮动,中间采用margin-left 和 margin-right
<div class="main"> 
                <div class="right">这是右侧的内容 固定宽度</div>
                <div class="left">这是左侧的内容 固定宽度</div>
                <div class="center">中间内容，自适应宽度</div>
 
 </div>
-------------------------css--------------------------
<style>
        body{
            margin:0;
            padding:0;
        }
        .main{
            width:100%; 
            margin:0 auto;
         
        }
        .left{
            width:150px; 
            float:left; 
            background:red;
            height: 60px;
        }
        .center{
            margin-left:150px;
            margin-right:200px;
          background-color:pink;
         height: 60px;
        }
        .right{
            width:200px;
             float:right; 
             background-color:blue;
             height: 60px;
        }
    </style>
   三个div的顺序：center必须是最后一个，即HTML的文档结构可以是left——right——center也可以是right——left——center，但绝对不能是left——center——right
二、左右两侧采用绝对定位 中间同样采用margin-left margin-right方法

<div class="main"> 
                <div class="left">这是左侧的内容 固定宽度</div>
                <div class="center">中间内容，自适应宽度</div>
                <div class="right">这是右侧的内容 固定宽度</div>
</div>
 
------------------------------css-------------------------------------
 <style>
        body{
            margin:0;
            padding:0;
        }
        .main{
            width:100%; 
            margin:0 auto;
         
        }
        .left ,.right{
            position: absolute;
            top:0;
            width: 180px;
            height: 100%;
        }
        .left{
           left: 0;
            background:red;
           
        }
        .center{
            margin-left:180px;
            margin-right:180px;
           
        }
        .right{
             right:0;
             background-color:blue;
            
        }
    </style>
     left、right采用绝对定位（left固定在左边，right固定在右边），所以left、right乖乖待在左右两边；center设置了左右margin（如果不设置会覆盖left，right） ，margin的位置刚好放left和right。
三、flex布局

<div class="main"> 
                <div class="right">这是右侧的内容 固定宽度</div>
                <div class="center">中间内容，自适应宽度</div>
                <div class="left">这是左侧的内容 固定宽度</div>      
             </div>
--------------------------------CSS----------------------------
 .main{
            display: flex;
            width:100%; 
            margin:0 auto;
         
        }
        .left{
            width:150px; 
            height: 60px;
            background:red;
        }
        .center{
            flex: 1;
            background-color:pink;
             height: 60px;
        }
        .right{
            width:200px;
            height: 60px;
            background-color:blue;
            
        }
左右宽度设置固定，中间div通过设置flex：1让其占满剩余空间，达到左右固定，中间自适应的效