1

ブラウザウィンドウが最大化されると、このコードは正常に機能し、子は親内に含まれ、親はブラウザの幅にまたがります。ただし、ブラウザウィンドウが子要素の幅よりも小さい場合、親要素にはそれを含めることができません（chrome20およびfirefox13でテスト済み）

http://jsfiddle.net/x9duU/

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>

        <style type="text/css">
            #toolbar {
                background-color:#cccccc;
                padding:10px 0;
            }

            #nav {
                background-color:#00cccc;
                margin:0 auto;
                width:1000px;
            }
        </style>
    </head>
    <body>

        <div id="toolbar">
            <div id="nav">NAVIGATION</div>
        </div>

    </body>
</html>

親をフローティングにして100％の最小値を与えることで問題を解決できますが、これは間違っているようです。これを解決するにはどうすればよいですか？

4

4 に答える 4

2

#toolbarはblocklevel-elementであり、デフォルトでwidth:100%は親要素に関して-100％の幅になります。これはそれが従う規則であり、幅が超過した場合に子をオーバーフローさせます。オーバーフロープロパティを設定することで、これを微調整できます。

ただし、親divで子の幅を考慮に入れる場合は、最小幅（子の幅に等しい）を設定します重要：可能なマージンとパディングを考慮に入れる必要があります（またはボックスモデルを境界線に変更する必要があります） -箱）。

#toolbar {
   min-width:1000px;
}​
于 2012-07-11T10:06:32.323 に答える
0

これを修正する最も簡単で最も適切な方法は、1000pxを削除するwidthこと#navです（実際にそこで何をしているのですか？）。

あるいは、与える#toolbar overflow: hiddenことで同じ視覚効果が得られます。

于 2012-07-11T10:04:40.807 に答える
0 
        #toolbar {
            background-color:#cccccc;
            padding:10px 0;

            overflow: hidden;
        }
于 2012-07-11T10:06:23.510 に答える
0

ナビゲーションでmin-width：1000pxを試してください 

 #nav {
        background-color:#00cccc;
        margin:0 auto;
        min-width:1000px;/*New style*/
    }​
于 2012-07-11T10:05:38.523 に答える