CSS - 均匀拉伸(stretch) block

Question

我需要这样来:

block 的数量可以不同。

jsbin

Answer 1

由于这个问题是用 css3 标记的，我将建议一个 css3 解决方案。

演示:http://jsfiddle.net/mqchen/VEmCK/

.wrap {
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21+ */
    display: flex;          /* NEW: Opera 12.1, Firefox 22+ */

    border: 1px solid black;
    padding: 1px;
    float: left;

    width: 100%;

    clear: both;
    margin-bottom: 20px;
}

.box {
    -ms-box-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    box-flex: 1;
    flex: 1;

    border: 1px solid red;
    padding: 5px 40px;
    margin-right: 30px;
}
    .wrap .box:last-child {
        margin-right: 0;
    }

(您需要调整尺寸以供您自己使用，但我认为这可以大致了解它如何适合您。)

此解决方案使用 flexbox 来对齐框。您可以在这里阅读更多相关信息:http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/