親コンテナに幅がない場合、どのように浮動小数点divを整列させますか？

Question

私はこれまでに尋ねられた同様の質問を知っていますが、親divが未知の幅を持っていて決定的な答えを見たことはありません。

だから状況はここにあります。

<style> 
.parent { 
    width: 100%; 
} 

.child { 
    width: 300px; 
    float: left; 
} 

</style> 

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

基本的に、ユーザーの画面解像度がサポートできるように、多くの子divを親コンテナに収めたいと考えています。

IE7をサポートしたいので、私はcss3メディアクエリを使用したくありません。

javascriptを使用して親に幅を指定しようとしましたが、コンテンツが読み込まれた後に中心にジャンプするので理想的ではありません。何か案は？

Answer 1

これはjavascriptを使用しないと最も近い解決方法です。 div30のサイドバー側を同時に中央にするのはdisplay:inline-block;です。私は親をdisplay:table-cell;に変えようとしましたが、うまくいきませんでした。したがって、強力なセンタリング動作のために実際の<table>を使用する必要があります。

http://jsfiddle.net/Dgdhr/

編集：http://jsfiddle.net/Dgdhr/1（テーブルなし：MartinodFのおかげで）

<table width="100%"> 
<tr> 
<td align="center"> 
      <div class="child">1</div> 
      <div class="child">2</div> 
      <div class="child">3</div> 
      <div class="child">4</div> 
      <div class="child">5</div> 
      <div class="child">6</div> 
</td> 
</tr> 
</table> 

.child { 
    width: 100px; 
    height:100px; 
    margin:10px; 
    display:inline-block; 
    background:#e0e0e0; 
}