三栏布局实现方式

思路一：父元素相对定位，通过绝对定位固定左右两侧，使用margin设置左右边距

• html部分

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

• css部分

*{margin:0;padding:0}
.main{
   position: relative;
}
.left{
  position:absolute;
  top:0;
  left:0;
  width: 200px;
  height: 200px;
  background-color: red;
}
.right{
  position:absolute;
  top:0;
  right:0;
  width: 200px;
  height: 200px;
  background-color: green;
}
.middle{
  height: 200px;
  background-color: yellow;
  margin-left:210px;
  margin-right:210px;
}

思路二：左右两栏 使用浮动，中间使用margin撑开

• html部分

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

• css部分

*{margin:0;padding:0};
.main {
    overflow: hidden;
}
.left {
    float: left;
    background-color: gray;
    width: 200px;
    height: 200px;
}
.right {
    float: right;
    background-color: gray;
    width: 200px;
    height: 200px;
}
.middle {
    height: 200px;
    background-color: lightgray;
    margin-left: 210px;
    margin-right: 210px;
}

注意:这种布局方式有一个缺点，html结构中，把中间的div放到下面。

思路三：flex布局

• html部分

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

• css部分

.main {
  display:flex;
}
.left {
    background-color: gray;
    width: 200px;
    height: 200px;
}
.right {
    background-color: grey;
    width: 200px;
    height: 200px;
}
.middle {
    flex: 1 1 auto;
    width: 200px;
    height: 200px;
    background-color: lightgray;
}