css - CSS - ブロックを均等に伸ばす

Question

私はこのように来る必要があります：

ブロックの量は異なる場合があります。

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/

Answer 2

div の数を数え、100 で割り、それを幅として割り当てるスクリプトを作成する必要があります。本当に正しくやりたい場合は、ファウンデーション css フレームワークを使用して計算を行うこともできます (少なくとも幅)。