三栏布局中间自适应

三栏布局中间自适应

一、使用flex布局

//原理使用flex布局，左右给固定宽度，中间使用felx:1分得剩余宽度
    .outer{
      display: flex;
      width: 100%;
    }
    .outer>div{
      height: 200px;
    }
    .left{
      width: 200px;
      background-color: red;
    }
    .center{
      flex: 1;
      background-color: skyblue;
    }
    .right{
      width: 200px;
      background-color: greenyellow;
    }
  <div class="outer">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

二、使用float

//原理使用float浮动，左右固定的宽度，中间使用calc()函数计算宽度
 .outer{
      width: 100%;
      min-width: 600px;
    }
    .outer>div{
      height: 200px;
    }
    .left{
      float: left;
      width: 200px;
      background-color: red;
    }
    .right{
      float: right;
      width: 200px;
      background-color: skyblue;
    }
    .center{
      float: left;
      width:calc(100% - 400px);
      background-color: yellowgreen;
    }
  <div class="outer">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>

三、使用position

//原理使用position定位，子盒子绝对定位，给定左右固定宽度，
//左边left为0，右边right为0，中间左右距离为左右盒子的宽度
.outer{
      position: relative;
      width: 100%;
      min-width: 600px;
    }
    .outer>div{
      position: absolute;
      height: 200px;
      top: 0;
    }
    .left{
      width: 200px;
      left: 0;
      background-color: orange;
    }
    .right{
      width: 200px;
      right: 0;
      background-color: orange;
    }
    .center{
      left: 200px;
      right: 200px;
      background-color: skyblue;
    }
 <div class="outer">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

四、使用table布局

//原理使用table布局，给左右固定的宽度，给中间盒子进行table布局，
//继承父亲(总宽度-左右宽度的)100%类似于felx布局
  .outer{
      display: table;
      width: 100%;
      min-width: 600px;
    }
    .outer>div{
      height: 200px;
    }
    .left{
      width: 200px;
      background-color: red;
    }
    .right{
      width: 200px;
      background-color: greenyellow;
    }
    .center{
      display: table-cell;
      width: 100%;
      background-color: skyblue;
    }
  <div class="outer">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

五、使用grid布局

//原理使用grid布局，通过父盒子给子盒子行和列进行设置大小，行代表高度，
//列代表宽度，中间设置为auto为自适应
.outer{
      display: grid;
      grid-template-columns: 200px auto 200px;
      grid-template-rows: 200px;
    }
    .inner{
      background-color: orange;
    }
    .middle{
      background-color: skyblue;
    }
 <div class="outer">
    <div class="inner"></div>
    <div class="inner middle"></div>
    <div class="inner"></div>
  </div>

六、使用双飞翼布局

//原理使用负的margin值进行挤压，中间盒子设置为100%宽度，左右盒子给定宽高
//通过使用负margin值进行挤压，挤到指定位置
    .outer{
      width: 100%;
    }
    .outer>div{
      float: left;
    }
    .middle{
      width: 100%;
      height: 200px;
      background-color: red;
    }
    .left{
      width: 200px;
      height: 200px;
      background-color: skyblue;
      margin-left: -100%;
    }
    .right{
      width: 200px;
      height: 200px;
      margin-left: -200px;
      background-color: orange;
    }
  <div class="outer">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>