2012-02-18 35 views
0

を使用する必要があります知っている...均等または均等にdivを配布します。はい、私は次のHTMLコード/構造持って、私はテーブル

<div id="container"> 
<div id="div1">text</div> 
<div id="div2">more text</div> 
<div id="div3">nice text</div> 
<div id="div4">bad text</div> 
<div id="div5">hello world</div> 
<div id="div6">foo</div> 
<div id="div7">bar</div> 
<div id="div8">Dick Beatie</div> 
<div id="div9">Chuck Norris</div> 
<div id="div10">Brian Blessard</div> 
</div> 

と、私は次のCSSを持っていると言うが:

#container{ 
    overflow:auto; 
    width:100%; 
} 

#container div{ 
float:left; 
padding:10px; 
text-align:center; 
width:10%; 
} 

コンテナ内のDIVは同じサイズですが、コンテナ内に収まらない場合があります。私はそれらが現在次の行に流出するようにそれらを合うようにします。私はテーブルを使うべきだと言っていませんが、私はテーブルを使うべきだと思います。私はDIVの幅を減らすことができますが、コンテナの幅を調整する必要があることもわかります。

アドバイスをいただきありがとうございます。

ps。私はいくつかのジョーカーはテーブルを使用すると言うだろう!

+0

10%の10ディビットが10pxのパッドで100%になるのはどうですか?パディングを追加すると、10%にすることはできません。常にオーバーフローします。 –

+0

さて、私はそれらを9%に設定しましたか? –

+1

幅をパーセントで設定し、実際のピクセルで埋めているため、実際の幅は何に依存しますか。あなたは1%のパディングで8%の幅を持つことができます(私はパディングが両側に追加されていると思いますか?私は確かに覚えていません)。 10px * 2(各辺)* 10divs = 200ピクセルなので、幅が2000ピクセルの場合、パディングのために10%(200ピクセル)残るので、あなたが提案している9% 。 –

答えて

3

box-sizing: bordex-boxを使用すると、幅にパディングが含まれます。

+0

私は古いブラウザではサポートされていないという点でこれに同意します。あまりエレガントではないが、より堅牢なソリューションは、既存のdivs1-10の内部にdivを追加し、最も内側のdivにパディングを適用することです。 –

関連する問題