页面布局(三栏布局)

1. 浮动解决方案

.layout{
  margin-top: 10px;
}
.layout>div{
  height: 100px;
}
.float-left{
  width: 200px;
  float: left;
  background-color: blue;
}
.float-center{
  margin: 0 200px;
  background-color: yellow;
}
.float-right{
  width: 200px;
  float: right;
  background-color: red;
}

<article class="layout">
  <div class="float-left"></div>
  <div class="float-right"></div>
  <div class="float-center">float</div>
</article>

2. 绝对定位解决方案

.position-left{
  position: absolute;
  width: 200px;
  left: 0;
  background-color: blue;
}
.position-center{
  margin: 0 200px;
  background-color: yellow;
}
.position-right{
  position: absolute;
  width: 200px;
  right: 0;
  background-color: red;
}

<article class="layout">
  <div class="position-left"></div>
  <div class="position-right"></div>
  <div class="position-center">position</div>
</article>

3. flexbox解决方案

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

<article class="layout flexbox">
  <div class="flex-left"></div>
  <div class="flex-center">flex</div>
  <div class="flex-right"></div>
</article>

4. 表格布局解决方案

.table{
  width: 100%;
  display: table;
}
.table-left,.table-center,.table-right{
  display: table-cell;
}
.table-left{
  width: 200px;
  background-color: blue;
}
.table-center{
  width:auto;
  background-color: yellow;
}
.table-right{
  width: 200px;
  background-color: red;
}

<article class="layout table">
  <div class="table-left"></div>
  <div class="table-center">table</div>
  <div class="table-right"></div>
</article>

5. 网格布局解决方案

.grid{
  display: grid;
  grid-template-columns: 200px auto 200px;
}
.grid-left{
  background-color: blue;
}
.grid-center{
  background-color: yellow;
}
.grid-right{
  background-color: red;
}

<article class="layout grid">
  <div class="grid-left"></div>
  <div class="grid-center">grid</div>
  <div class="grid-right"></div>
</article>