div 左右排列 高度自适应_如何实现左右定宽，中间自适应的三栏布局？

方法一 浮动：让左右定宽，中间距离左边和右边各宽度+10px（为了实现缝隙间隔多了10px）且右边元素要在中间元素之前（原因是因为以下浮动的特性的第三条）

注：浮动的特性

• 盖不住的文本
• 浮动元素后面不是块级元素，后面的元素将会和它并排（除非设置了元素的宽度，并且屏幕放不下时将会换行）
• 浮动元素的上一个元素如果没有浮动，浮动只在当前行浮动；当浮动遇到浮动，它们将在一行排序，除非没有位置了
• 当元素设置定位值为absolute、fixed时，浮动将被忽略
• float引起父元素高度塌陷
• 浮动元素会被后一个元素的margin-top影响

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;
   margin-right:70px;
   margin-left:70px;
  height:30px

}
.right{
  background: green;
  float:right;

}

方法一的优点：兼容性高

方法一的缺点：要处理好浮动，最后要记得清除浮动

最终效果(以下所有的方法，最终效果都是这个)

方法二 绝对定位：让左右定宽，且左中右元素都为绝对定位，左边元素距离左边0px,右边元素距离右边0px，中间元素距离左边宽度+10px，距离右边宽度+10px（以下+10px都是为了增加缝隙）

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:70px;
  right:70px;

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

}

方法二的优点：方便快捷

方法二的缺点：布局脱离文档流，意味着接下来的元素都要脱离文档流，可用性较差

方法三 flex布局：先让父元素display：flex,左右定宽，中间flex：1 自适应

HTML代码

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

CSS代码

.container{
  display:flex;
}
.left , .right{
  width:60px;
  height:30px;
  
}
.left{
  background-color:black;
  
}
.middle{
  background-color:red;
  flex:1;
  margin-left:10px;
  margin-right:10px;
}
.right{
  background: green;

}

方法三的优点：css3新布局，特别适合移动端布局，比较完美

方法三的缺点：暂无

方法四 网格布局（grid）：先让父元素display:grid,宽度设置为百分百，在用grid-template-columns来设置宽度

HTML代码

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

CSS代码

.container{
 display:grid;
  width:100%;
  grid-template-rows:30px;
  grid-template-columns:60px auto 60px
}
.left{
  background-color:black;
  
}
.middle{
  background-color:red;
  margin-left:10px;
  margin-right:10px;
 
}
.right{
  background: green;

}

方法四的优点：新布局

方法四的缺点：暂无

其他方法：table-cell、inline-block，只需了解他们可以实现三栏布局，但是无需知道其细节。