css - container div shrink-to-fitコンテンツ

Question

私はここに壁を打っています、誰かが助けてくれることを願っています。

黒い背景のコンテナdivがあるため、その中にコンテンツを動的に「縮めてフィット」する必要があります。私はディスプレイを試しました：インラインブロックといくつかのこれ以外の通常の修正がありますが、無駄です。

内部のコンテンツは、flush：leftの多数のdivボックスです。この数のボックスは、ページが読み込まれるたびに動的に変更できます。ここで

は私のCSSです：

#blackboard { 
    background-color: black; 
    padding: 2px; 
    max-width: 580px; 
    display: inline-block; 
} 

.box { 
    height: 40px; 
    width: 34px; 
    border: 1px solid black; 
    margin: 1px; 
    float: left; 
    background-color: White; 
    display: inline-block; 
} 

そして、私のHTML：かかわらず、ここでそれを見ることが

<div id="blackboard"> 

<div class="box" id="topbox1"></div><div class="box" id="topbox2"></div><div class="box" id="topbox3"></div><div class="box" id="topbox4"></div><div class="box" id="topbox5"></div><div class="box" id="topbox6"></div><div class="box" id="topbox7"></div><div class="box" id="topbox8"></div><div class="box" id="topbox9"></div><div class="box" id="topbox10"></div><div class="box" id="topbox11"></div><div class="box" id="topbox12"></div><div class="box" id="topbox13"></div><div class="box" id="topbox14"></div><div class="box" id="topbox15"></div><div class="box" id="topbox16"></div><div class="box" id="topbox17"></div><div class="box" id="topbox18"></div><div class="box" id="topbox19"></div><div class="box" id="topbox20"></div><div class="box" id="topbox21"></div><div class="box" id="topbox22"></div><div class="box" id="topbox23"></div><div class="box" id="topbox24"></div><div class="box" id="topbox25"></div><div class="box" id="topbox26"></div><div class="box" id="topbox27"></div><div class="box" id="topbox28"></div><div class="box" id="topbox29"></div><div class="box" id="topbox30"></div><div class="box" id="topbox31"></div><div class="box" id="topbox32"></div><div class="box" id="topbox33"></div><div class="box" id="topbox34"></div><div class="box" id="topbox35"></div> 

<div style="clear:both;"></div> 

</div> 

簡単：

http://jsfiddle.net/pbspry/L8e34tvx/

基本的にはちょうどコンテナのdiv（黒を必要とします）をラップして、等しい黒スペース（わずか数ピクセル）があるようにするarounウィンドウのサイズが変更されたり、ブラウザのズーム設定が増減したりしても、グリッド全体が表示されます。

ありがとうございました！これは本当に私はいくつかの理由で使用したくない、javascriptをせずに行うことができないよう

UPDATE

が見えます。

最も簡単な解決策は、行ごとに特定の数のボックスを選択し、その番号の後ろに「クリア：両方」を入れることです。これにより改行が強制され、外側のdivが収まるように適切に縮小されます（異なるブラウザのズームレベルであっても）。

Answer 1

display: inline-blockのため、コンテナの幅にはすでに縮みがあります。

は、アルゴリズムはまた好ましい最小幅を計算し、明示的な改行が

起こる場所以外の線を破ることなくコンテンツをフォーマットすることによって好ましい幅を計算

1. としてthe specに定義されている例えば、可能な限りすべての改行を試みることによって行われる。 CSS 2.1では正確なアルゴリズムが定義されていません。
2. 利用できる幅検索：このケースでは、これが含むブロックの幅を引い使用margin-left、 border-left-width、padding-left、padding-right、 border-right-widthの値は、margin-right、および関連する スクロールバーの幅です。

その後シュリ​​ンクツーフィット幅は次のとおりです。

あなたのケースでは

min(max(preferred minimum width, available width), preferred width) 

、

• な幅が100 *の38px = 3800px
• です推奨最小幅は38px
• availabル幅はおそらく38〜3800pxの間です。

次に、縮小に合わせる幅が使用可能な幅になります。それはmax-width: 580pxで締め付けられます。

AFAIKあなたはJSなしであなたの望む動作を達成する方法がありません。そして、おそらく理由は、小さな変更がいくつかの要素を他の行に押し込み、コンテナの幅を大きく変更する可能性があるからです。