CSS佈局基礎：兩列 or 三列自適應

【第一列或某兩列固定寬度，最後一列佔據頁面剩餘寬度（即寬度自適應）】

寫這篇文章主要是爲了解決一個實際遇到的問題：
左右兩列布局，左側寬度固定，右側寬度自適應（或左中右三列布局，左側和中間寬度固定，右側寬度自適應），當頁面寬度變化時，怎樣使右側元素中的內容始終在頁面剩餘寬度中居中顯示，將右側元素設置了text-align: center;以後，問題其實也就是怎樣讓右側元素的寬度佔據頁面剩餘全部寬度。

基礎知識：元素float以後的變化

1.本來爲inline或本來爲block的元素，設置了float: left 或 float: right以後，會變得具備inline-block元素的特性，即：不獨佔一行，且能夠設置寬和高。
2.與position:absolute;的脫離文檔流不一樣的是：float的幾個元素，它們在同一個文檔流中。
3.float半脫離文檔流：兩個元素中的前一個設置了float:left;，對於後續元素的元素來講，前一個元素是脫離文檔流的，也就是會佔據元素的位置；對於後續元素的內容來講，前一個元素又是佔據文檔流的，也就是不會覆蓋前一個元素的內容。如圖所示：

方法一： float + calc()

//html
<div class="wrap">
    <div class="left">left</div>
    <div class="right"><p>我要居中</p><p>center</p></div>
</div>
//css
.wrap {
  width: 500px;
  background: yellow;
  overflow: hidden;
}
.left {
  float:left;
  width: 100px;
  background: blue;
}
.right{
  float:left;
  background: red;
  text-align:center;
}

若是咱們僅僅這樣寫，那麼效果會像下圖這樣：

能夠看到右側元素的寬度並非頁面剩餘寬度。緣由是：右側元素float以後具備了行內塊級元素的特性，即寬度爲auto。因此沒法佔滿剩餘寬度。

這不是咱們想要的結果，因此咱們要本身設置右側元素的寬度：

.right {
    width: calc(100% - 100px);
}

就符合咱們的要求了：

方法二：position / float + margin-left

//html部分同上
//css
.wrap {
  position: relative;
  width: 500px;
  background: yellow;
}
.left {
  position:absolute;
  left: 0; /*或 float:left; */
  width: 100px;
  background: blue;
}
.right{
  margin-left: 100px;
  background: red;
  text-align:center;
}

原理是：左側元素float: left或者設置position: absolute 以後脫離了文檔流，右側其實依然是一個霸道的獨佔一行的塊級元素（block），設置margin-left爲左側元素寬度以後，看起來就像是兩個元素在同一行，且右側元素寬度自適應啦：

方法三：及其方便的flex

.content {
  width: 500px;
  background: blue;
  display: flex;
}
.left {
  background: pink;
  width: 100px;
}
.right {
  background: yellow;
  text-align: center;
  flex: auto;
}

參考資料：
http://www.imooc.com/video/774/0