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>