各要素に均等に領域を分割する

Question

widthの絶対値を指定せずに、各要素に同じように領域（またはdiv）を分割する方法はありますか。 CSSコードをフレキシブルにするだけです。例えば

あなたはdiv要素にこれらの要素を入れた場合：

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

CSSが自動的に各.child要素width=50%

そして、この例で得られます：

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

にCSSをします自動的にそれぞれを与える.child要素width=25%

可能ですか？

Answer 1

をあなたは、私が怖いテーブルを使用して、子のdivのためにラップを追加する必要があり、あなたはそれがとても好きで行うことができます。

#parent{ 
width: 1000px; /* Example width */ 
height: 100px; /* Example height */ 
display: table; 
table-layout: fixed; 
} 
.childwrap { 
display:table-row; 
} 
.child{ 
display: table-cell; 
} 

例：http://cssdesk.com/rZKRW

Answer 2

することができます。必要なパーセントで値をwidthプロパティに適用し、その親に定義済みのものを適用するようにしてください。すべてのThas。祖先の幅が指定されなければならないその他の詳細の中で、この作業では

.child { 
with:50%; 
} 

やあなたの4人の子供のための...

.child { 
width:25%; 
} 

。祖先の幅が子供の内容に依存する場合、計算されていない幅がある可能性があります。

あなたの先祖は、それ自体がporcentual値をHAVA DIV場合、その祖先がで定義されたというようにしているとことを要求されます。..

Answer 3

あなたは以下のjQueryコードを使用することができます。

var childs = $('#parent .child') 
    ,width = Math.floor(100/childs.length); 
childs.css('width',width+'%');