Layout两列定宽中间自适应三列布局

最容易理解的一种方法，以中间内容为主体，通过 margin 或者 padding 将两侧撑开，最后用 absolute 定位两侧

 html:

<div class="container">
  <div class="left">

  </div>
  <div class="main"></div>
  <div class="rigth">

  </div>
</div>
css:

body,html {
  height: 100%;
}
.container{
  position: relative;
  height: 100%;
}
.left,.rigth{
  position: absolute;
  top: 0;
  width: 200px;
  height: 100%;
}
.left{
  left: 0;
  background: red;

}
.rigth{
  right: 0;
  background: black;
}
.main {
  margin: 0 200px;
  background: blue;
  height: 100%;
}

第二种移动端flex布局
html:

<div class="container">
  <div class="left">

  </div>
  <div class="main"></div>
  <div class="rigth">

  </div>

css:

.container {
  display: flex;
}
.left, .right {
  width: 200px;
}
.main {
  display: flex;
  flex: auto;
}



三左右浮动
css:

.container {
  overflow: hidden;
}
.left, 
.right {
  width: 200px;
}
.main {
  width: auto;
}
.left {
  float: left;
}
.right {
  float: right;
}