1

当我的浏览器窗口最大化时，此代码工作正常，子级包含在父级中，父级跨越浏览器的宽度。但是，当浏览器窗口小于子元素宽度时，父元素无法包含它（在chrome 20和firefox 13中测试）

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是一个块级元素，默认为width:100%- 关于父元素的 100% 宽度。这是它遵守的规则，让孩子在宽度超过时溢出。您可以通过设置溢出属性来调整它。

但是，如果您希望父 div 考虑它的孩子的宽度，请设置一个最小宽度（等于孩子的宽度）重要：您必须考虑可能的边距和填充考虑（或将框模型更改为边框-盒子）。

#toolbar {
   min-width:1000px;
}​
于 2012-07-11T10:06:32.323 回答
0 
        #toolbar {
            background-color:#cccccc;
            padding:10px 0;

            overflow: hidden;
        }
于 2012-07-11T10:06:23.510 回答
0

解决这个问题的最简单和最合适的方法是从1000px 中删除width（#nav它在那里真正做了什么？）。

或者，给予#toolbar overflow: hidden也会达到同样的视觉效果。

于 2012-07-11T10:04:40.807 回答
0

在您的导航上尝试 min-width:1000px 

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