我的目标是固定宽度的布局，width:1008px 横跨所有显示器。这是我的 HTML-
<body>
<div id="god_container">
<div id="root">
... all content ...
</div>
</div>
</body>
和 CSS -
#god_container{
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
margin:auto;
position:static;
width:auto;
}
#root {
background-color:#FFFFFF;
margin:auto;
width:1008px;
color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10pt;
}
body{
color:#373737;
font:16px arial;
line-height:1;
background-color:#D4D9DD;
}
我认为这会解决问题。但是当我呈现时，root css 不遵守 1008px 值。另外 root 的 background-color 不显示为 #FFFFFF 即白色。它仍然显示我的 body 的 background-color。我做错了什么？
更新:对于任何感兴趣的人，我在 http://www.dynamicdrive.com/style/layouts/category/C12/ 找到了出色的现成 CSS 布局。
最佳答案
为正文提供 background-image 和颜色，确保它显示在所有页面上，并让 #god_container 充当页面的包装器，通过 margin:0 auto; 将其居中并为其指定 width:1008px;。
此外，您不必将 position:static; 提供给 #god_container 包装 div，而是使用 position:relative;确保所有子 div 都放置在其中，即使绝对定位也是如此。
最后，给 #root width:100% 会将 div 放置到它的父 div 宽度。
尝试使用这个 CSS:
body{
color:#373737;
font:16px arial;
line-height:1;
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
}
#god_container{
margin:0 auto;
position:relative;
width:1008px;
}
#root{
background-color:#FFFFFF;
margin:auto;
width:100%;
color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10pt;
}
关于CSS 布局固定宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4172997/