css 三列布局

常用的几种3列布局，即左右两边宽度固定，中间自适应，这也是css面试中大概率会问的问题。

主要有以下几种方式：

圣杯布局

<div class="container">
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>

.container {
    padding-left: 210px;
    padding-right: 190px;
}
.main {
    float: left;
    width: 100%;
    height: 300px;
    background-color: rgba(255, 0, 0, .5);
}
.sub {
    position: relative;
    left: -210px;
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5);
}
.extra {
    position: relative;
    right: -190px;
    float: left;
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5);
}

双飞翼布局

<div class="main-wrapper">
    <div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>

.main-wrapper {
    float: left;
    width: 100%;
}
.main {
    height: 300px;
    margin-left: 210px;
    margin-right: 190px;
    background-color: rgba(255, 0, 0, .5);
}
.sub {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5);
}
.extra {
    float: left;
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5);
}

table 布局

<div class="container">
  <div class="sub"></div>
  <div class="main"></div>
  <div class="extra"></div>
</div>

.container{
  display: table;
  width: 100%;
  table-layout: fixed;
}
.sub{
  width: 180px;
  height: 300px;
  background-color: rgba(0, 255, 0, .5);
  display: table-cell;
}
.extra{
  width: 180px;
  height: 300px;
  background-color: #ddd;
  display: table-cell;
}
.main{
  width: 100%;
  height: 300px;
  background-color: rgba(255, 0, 0, .5);
  display: table-cell;
}

flex布局

.container{
  display: flex;
}
.sub{
  width: 180px;
  height: 300px;
  background-color: rgba(0, 255, 0, .5);
}
.extra{
  width: 180px;
  height: 300px;
  background-color: #ddd;
}
.main{
  flex: 1;
  height: 300px;
  background-color: rgba(255, 0, 0, .5);
}