CSS三栏布局

左右固定 中间自适应

1. flex

<div class="box">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
 </div>
<style>
    .box{
      display:flex;
      width:100%;
      height: 60px;
    }
    .left{
      width:200px;
      height: 60px;
      background-color: brown
    }
    .right{
      width:200px;
      height: 60px;
      background-color:pink
    }
    .content{
      flex:1;
      margin:0 10px;
      height: 60px;
      background-color:yellow
    }
  </style>
  

2. position定位 发现margin-left也是从它定位的地方算起的；

.box{
      position: relative;
      width:100%;
      /* overflow:hidden; */
    }
    .left{
      position:absolute;
      top:0;
      left:0;
      width:200px;
      height: 60px;
      background-color: brown
    }
    .right{
      position:absolute;
      top:0;
      right:0;
      width:200px;
      height: 60px;
      background-color:pink
    }
    .content{
      position:absolute;
      left:200px;
      right:200px;
      height: 60px;
      margin:0 10px;
      background-color:yellow
    }
  </style>
  <div class="box">
    <div class="left">a</div>
    <div class="content">b</div>
    <div class="right">c</div>
  </div>

3. float 浮动

<style>
    .box{
      position: relative;
      width:100%;
      /* overflow:hidden; */
    }
    .left{
      float:left;
      width:200px;
      height: 60px;
      background-color: brown
    }
    .right{
      float:right;
      width:200px;
      height: 60px;
      background-color:pink
    }
    .content{
      height: 60px;
      background-color:yellow;
      overflow:hidden; //保证了中间块不与两边元素重叠
    }
  </style>
  <div class="box">
    <div class="left">a</div>
    <div class="right">c</div>
    <div class="content">b</div>//一定要在最后
  </div>