原文鏈接：http://caibaojian.com/css-equal-layout.html

CSS等比例劃分，在CSS布局中是比較重要的，下面分享幾種常用方法和探討一下兼容性。

一：浮動布局+百分比

emmet html代碼：ul.float-ul>li*5>.con>h3{等分標題}+p{等分內容等分內容}

.float-ul{width: 100%; overflow: hidden; zoom: 1;}
.float-ul li{float: left; width: 20%;}

該樣式兼容性較好，但是無法實現當裏面的列增多時比例也隨著變化，必須手動修改，當然你也可以使用一個js來調整了。

二：行內元素（inline-block）+百分比

參考之前寫過的inline-block替換float的代碼，使用該樣式還可以實現布局居中等塊級元素所具有的特性。

.inline-ul{font-size: 0; *word-spacing: -1px;}
.inline-ul li{display: inline-block; *display: inline; *zoom: 1; font-size: 14px; vertical-align: top; word-spacing: normal; letter-spacing: normal; width: 20%;}
@media screen and (-webkit-min-device-pixel-ratio:0){
.inline-ul{letter-spacing: -5px;}
}
 

三：display:table + display:table-cell

我們知道表格可以根據內容進行劃分，CSS也有一個樣式是display:table來實現類似表格的布局，不過不支持IE8以下瀏覽器。

.table-cell{display: table; width: 100%;}
.table-cell li{display: table-cell;}

四：使用css3 display:flex.

舊語法：·

.flex-ul{display: -webkit-box; display: box;}
.flex-ul li{-webkit-box-flex:1; box-flex:1;}
 

新語法：

.flex-ul{display:-webkit-flex; display: flex; width: 100%;}
.flex-ul li{-webkit-flex:1; flex:1;}

該方法只適用於高級瀏覽器，IE10以下的還是算了。具體介紹

五：使用柵格化系統

例如Bootstrap的柵格化系統

//code from http://caibaojian.com/css-equal-layout.html
<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    ...
  </div>
</div>

.col-md-3 { float:left; }
@media (min-width: 992px) {
  .col-md-3 { width: 25%; }
  /* 父級容器的3/12 */
}

缺點和第一個的float一樣，需要根據列數來跳出寬度調整。

總結：

如果需要兼容IE6-IE7的，如果列數固定可以使用第一種和第二種。如果列數不固定，可以加少量js支持。

如果是只考慮移動的，考慮第三種，兼容性比下面的flex支持的比較好。

如果單純的不考慮低版本瀏覽器的，可以考慮使用第四種。

CSS等分布局方法