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);
}