【CSS】左右定宽，中间自适应如何实现

浮动

左栏和右栏分别设置 float 为 left 和 right。
注意：使用此方式 HTML 中三栏的顺序为：左-右-中

html

<div>
   <div class="left"></div> 
   <div class="right"></div> // 右边元素要在中间元素之前
  <div class="middle"></div> 
</div>

css

.left , .right{
  width:60px;
  height:30px;
}
.left{
  background-color:black;
  float:left; // 关键
  
}
.middle{
  background-color:red;
  height:30px

}
.right{
  background: green;
  float:right; // 关键
}

绝对定位

对三栏设 position 为 absolute，左栏和右栏分别设 left 和 right 的值为 0，中间栏设置 left 和 right 的值为左栏和右栏的宽度

html

<div>
   <div class="left"></div>
   <div class="middle"></div>
   <div class="right"></div>
</div>

css

.left , .right{
  width:60px;
  height:30px;
  position:absolute;
  
}
.left{
  background-color:black;
  left:0px
  
}
.middle{
  background-color:red;
  position:absolute;
  height:30px;
  left:60px;
  right:60px;

}
.right{
  background: green;
  right:0px;

}

flex

1. 为三栏的父元素设置 display 为 flex
2. 并在中间栏设置 flex 的值为 1
3. 两边给固定宽度即可。

grid

对三栏的父元素设置 display 为 grid，同时设置宽度、grid-template-rows 和 grid-template-columns

父元素：

.parent {
  width: 100%;
  display: grid;
  grid-template-rows: 400px;
  grid-template-columns: 200px auto 200px;
}