多列布局方案整理

瞭解 CSS 中屬性的值及其特性， 透徹分析問題和需求才能夠選擇和設計最適合的佈局解決方案。

多列布局在網頁中很是常見（例如兩列布局），多列布局能夠是兩列定寬，一列自適應， 或者多列不定寬一列自適應還有等分佈局等。

定寬-自適應

有以下佈局

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

float+margin

.left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px
    /*間距可再加入 margin-left */
  }

優勢：容易理解
缺點：IE6中會有3像素的BUG， 解決方法能夠在.left 加入 margin-left:-3px。
由於left是浮動元素，right是沒有浮動的，若是right內容中有清楚浮動就會產生bug。

改進：float + margin + (fix)

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
    /*外層在包裹一個容器*/
  <div class="right-fix">
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>
<style>
  .left {
    float: left;
    width: 100px;
  }
  .right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
  }
  .right {
    margin-left: 100px
    /*間距可再加入 margin-left */
  }
</style>

兼容性很好，適用於多版本瀏覽器（包括 IE6）可是多了層right-fix的結構。但left不可選擇，被right-fix蓋住。須要設置left的 position: relative;來提升層級。

float+overflow

.left{ 
       float: left;
       width: 100px;
       margin-right: 20px;
  }
  .right{ overflow: hidden; //觸發BFC }

overflow:hidden使得div產生了BFC 模式（Block Formatting Context）塊級格式化文本，根據BFC的佈局規則之一，div那個產生的BFC區域不會與左邊浮動的元素所重疊。具體什麼是BFC能夠看看這篇文章

table

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*寬度爲剩餘寬度*/
  }

table 的顯示特性爲每列的單元格寬度合必定等與表格寬度。 table-layout: fixed; 可加速渲染，也是設定佈局優先。

table-cell 中不能夠設置 margin 可是能夠經過 padding 來設置間距。

flex

.parent{ 
      display: flex ; 
  }
 .left { 
       width: 100px;
       margin-right: 20px;
  }
  .right{
        /*等價於flex:1 1 0; 增加因子和收縮因子都爲1，
         基礎寬度爲0,那麼剩餘寬度都分配給right*/
        flex: 1 ; 
    }

flex-item 默認爲內容寬度。
缺點： CSS3 兼容性。根據內容判斷，性能會有問題，作小範圍佈局，不適合大範圍佈局。

不定寬-自適應

float + overflow

.left{ 
       float: left;
       width: 200px;
       margin-right: 20px;
  }
  .right{ overflow: hidden; //觸發BFC }

table

.parent{ 
      display:table; 
      width: 100%;
  }
 .left, .right { 
       display: table-cell;
  }
  .left{ 
       width:0.1%;  //寫的夠小就行，不寫1px的緣由是IE8會有問題
       padding-right:20px; 
   }
  .left p{ width : 200px;}  //用內部元素撐開，寬度能夠不定

flex

.parent{display:flex;}
.left{margin-right:20px;}
.right{flex:1;}

三列不定寬 + 自適應 與兩列的作法同樣

等分佈局

每一列的寬度和間距均相等。
有以下HTML結構

<div class="parent">
    <div class="column"><p>1</p></div>
    <div class="column"><p>2</p></div>
    <div class="column"><p>3</p></div>
    <div class="column"><p>4</p></div>
</div>

float

.parent{
    margin-left ：-20px; //爲父元素增長20px寬度
    }
 .column{
       float : left;
       width: 25%;
       padding-left : 20px;
       box-sizing : border-box;
      }

缺點：結構和樣式稍微有點耦合性

table

.parent-fix{  margin-left ：-20px; //爲父元素增長20px寬度 }
 .parent{ 
      display : table;
      width : 100%;
      table-layout : fixed;
  }     
  .column{
       float : left;
       width: 25%;
       padding-left : 20px;
       box-sizing : border-box;
  }

fix

.parent{ 
      display : flex;
  }     
  .column{
      flex: 1;
  }
  .column+.column{  margin-left: 20px;  } //選擇2，3，4

等高需求

table

上面自適應的table佈局就具備登高的佈局

flex

如上面自適應的例子，flex 自然等高

float

.parent{  overflow : hidden; }
 .left, .right{
       padding-bottom : 9999px;
       margin-bottom : -9999px;
  }

優勢是兼容性比較好缺點是僞等高 不是正真意義上的登高