中间自适应，两边300px，高度已知

<artical class="parent">
    <div class="left"></div>
    <div class="center">
      <h1>center</h1>
    </div>
    <div class="right"></div>
  </artical>

第一种 ===> float

左右div分别两边浮动 默认div按照left，center，right排列，此处为例外，由于浮动元素不占据文档流，center要写right后面否则right挤到下一行

.left{
  float:left;
  background-color:red;  
  width:300px;
}

.right{
  float:right;
   background-color:yellow;
   width:300px;
}

.center{
   background-color:blue;
}

第二种 ===> 绝对定位

所有div设置绝对定位 左右div设置宽度和left, right=0 中间div的left和right值分别为左右div宽度

div{
  min-height:200px;
  position:absolute
}
.left{
  left:0;
  background-color:red;  
  width:300px;
}

.right{
  right:0;
   background-color:yellow;
   width:300px;
}

.center{
   background-color:blue;
  left:300px;
  right:300px;
}

第三种 ===> flex （推荐）

设置center的flex=1

.parent{
  display:flex;
}
.left{
  background-color:red;  
  width:300px;
}
.right{
   background-color:yellow;
   width:300px;
}
.center{
   background-color:blue;
   flex:1;
}

第四种 ===> table

先把容器撑开，给不同格子设置宽度

div{
  display:table-cell;
}
.parent{
  display:table;
  height:200px;
  width:100%;
}
.left{
  background-color:red;  
  width:300px;
}

.right{
   background-color:yellow;
   width:300px;
}

.center{
   background-color:blue;

}

第五种 ===> grid

一样把容器撑开，设置三列，分别给宽度 网格布局 grid-template-rows设置行，columns设置列

.parent{
  display:grid;
  width:100%;
  grid-template-columns:300px auto 300px;
  grid-template-rows:200px;
}
.left{
  background-color:red;  
}

.right{
   background-color:yellow;
}

.center{
   background-color:blue;
}

===

如果改成竖直方向

• 注意height100%是没用的，使用vh高度，视口高度
• 例如flex，要改变布局方向，flex-direction=column