0

ページの100％を占める「赤」の背景を持ついくつかのdivを垂直に積み重ねようとしています。これらの div 内で、960px の中央の div を作成します。何が起こるかは非常に奇妙です: ウィンドウのサイズを 960px 未満に変更すると (スクロールバーが表示されるように)、スタックされた各 div の右側に隙間ができます。ここでライブの例を見ることができます: http://jsfiddle.net/GLE7A/

基本コード:

<style type="text/css">
    * { padding: 0; margin: 0; border: 0; }
    .wmain { background: red; }
    .w960 { margin: 0 auto; width: 960px; }
</style>

<div class="wmain">
    <div class="w960">
    test
    </div>
</div>

<div class="wmain">
    <div class="w960">
    test
    </div>
</div>

解決策は簡単です: min-width:960px; を追加するだけです。問題を修正するために.wmain divに

質問: そもそもなぜこの奇妙な動作が起こるのですか? 固定幅の子は、絶対位置の div や smth. のように、通常の流れを何らかの形で回避しますか?

ご感想ありがとうございます

4

1 に答える 1

1

これは、ブラウザーを混乱させる wmain div の幅を定義していないために発生します。

于 2012-11-04T19:48:11.047 に答える