css 一行自適應等比例布局

一、浮動布局+百分比

.row {
    width:100%;
    overflow:hidden;
    zoom:1;
}
.item {
    float: left;
    width: 20%;
}

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

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

.row {
    width:100%;
    font-size: 0; /*行內元素間有字符，諸如回車符等會被瀏覽器解析成一個空格*/
    *word-spacing: -1px;
}
.item {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
    word-spacing: normal;
    letter-spacing: normal;
    width: 20%;
}

三、display:table + display:table-cell

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

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

四、使用css3 display:flex

.row {
    width: 100%;
    display: box; /* OLD 2009版 - Android 4.4- */
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - chrome21+ Opera 12.1, Firefox 20+ */
}
.item {
    -webkit-box-flex: 1;    /* OLD - iOS 6-, Safari 3.1-6 */
    -webkit-flex: 1;        /* Chrome */
    flex: 1;
}

該方法只適用於高級瀏覽器，哪怕是移動端兼容性也不好，IE10以下的還是算了。具體介紹看另一篇文章。

五、使用柵格化系統

例如Bootstrap的柵格化系統

.col-md-3 { float:left; }
@media (min-width: 992px) {
    .col-md-3 { width: 25%; }
    /* 父級容器的3/12 */
}
<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        ...
    </div>
</div>

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

總結

如果需要兼容IE6-IE7的，如果列數固定可以使用第一種（浮動布局＋百分比）和第二種（行內元素＋百分比）。如果列數不固定，可以加少量js支持。

如果是只考慮移動的，考慮第三種（table-ceil），兼容性比下面的flex支持的比較好。
如果單純的不考慮低版本瀏覽器的，可以考慮使用第四種（flex）。

附布局基礎html代碼

<style>
.c-red {
        background-color: red;
    }
    .c-blue {
        background-color: blue;
    }
    .c-gray {
        background-color: gray;
    }
    .c-orange {
        background-color: orange
    }
    .c-green {
        background-color: green
    }
    .container {
        width: 1000px;
        height: 250px;
        margin: 50px auto;
        border: 5px solid black;
    }
    .item {
        height: 250px;
    }

</style>
<div class="container">
    <div class="row">
        <div class="item c-red"></div>
        <div class="item c-blue"></div>
        <div class="item c-gray"></div>
        <div class="item c-orange"></div>
        <div class="item c-green"></div>
    </div>
</div>