親divの幅を埋めるように子divを展開する

Question

したがって、1つのdiv内に3つのdivがあります。

<div class="parent"> 
<div class="child> Text</div> 
<div class="child">Text</div> 
<div class="child">Text</div> 
</div> 

子供のdivsが親の幅を埋めるようにします（子供の合計幅は親でなければなりません）。しかし、これは起こっていない、私は不足している。これは、子divがコンテンツに基づいて幅を設定しているためです。

私は何をしたいのですか？

CSS-

.child { 
    background: white; 
    color: #a7a9ac; 
    cursor: pointer; 
    font-size: 15px; 
    border-right: 1px; 
    border-top: 0; 
    border-bottom: 0; 
    border-left: 0; 
    border-style: solid; 
    border-color: @faded-grey; 
    padding-right: 10px; 
    margin: 0 auto; 
    height: 100%; 
} 

.parent { 
    border-top: 1px; 
    border-left: 0; 
    border-bottom: 1; 
    border-style: solid; 
    border-color: @faded-grey; 
    border-right: 0; 
    width: 100%; 
    margin-right: 0px; 
    height: 80px; 

} 

Answer 1

あなたはいつも3人の子供があるでしょうわかっている場合は、単純に使用することができます。

.parent > .child { 
    float: left; 
    width: 33%; 
} 

.parent { 
    overflow: auto; /*or whatever float wrapping technique you want to use*/ 
} 

はあなたがそこにどのように多くの子供たちがわからない場合、あなたがする必要がありますCSSテーブル、フレックスボックスを使用するか、またはインラインブロックをtext-align：justifyと組み合わせることができます。

Answer 2

あなたは.child CSSルールにこれらの3つのプロパティを追加することができます。

width:33%; 
float:left;  
box-sizing: border-box; 

最後の行は、あなたが箱にボーダー、パディングとマージンを追加するとき、それはまた、動作しますを確認します。

ONLINE DEMO

シモンズ：直接関連しているが、上記のフィドルで修正親のためのborder-bottomでエラーが、もありません。あなたは非0の値を使用するときは、ユニットを指定する必要があります：彼らは完全に応答するため

border-bottom:1px; 

Answer 3

私は素子数の変動に対応するために私の解決策のために必要。

私はこれに興味深い解決策を発見しました。基本的に表のように表示されます。すべての要素の利用可能な共有の幅、これも非常によく、画像の作品： http://jsfiddle.net/8Qa72/6/

.table { 
    display: table; 
    width: 400px; 
} 

.table .row { 
    display: table-row; 
} 

.table .row .cell { 
    display: table-cell; 
    padding: 5px; 
} 

.table .row .cell .contents { 
    background: #444; 
    width: 100%; 
    height: 75px; 
}