0

我的目标是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;
}

我以为这会解决它。但是当我渲染时,rootcss 不坚持1008px价值。根background-color也不会显示为#FFFFFF即白色。它仍然显示我bodybackground-color. 我究竟做错了什么?

更新:对于任何有兴趣的人,我都在http://www.dynamicdrive.com/style/layouts/category/C12/找到了出色的现成 CSS 布局

4

3 回答 3

1

为 body赋予background-image和 颜色,确保它显示在所有页面上,并#god_container作为页面的包装器,将其居中margin:0 auto;并赋予width:1008px;.

此外,您不必将 div 赋予position:static;包装#god_containerdiv,而是使用position:relative;它来确保所有子 div 都放置在其中,即使绝对定位也是如此。

最后,给出#rootawidth: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;
}
于 2010-11-13T14:41:28.173 回答
1

不确定我是否在这里遗漏了一些东西,但它可能会简单得多。你不需要一个包装器 DIV ......身体可以处理它。您所需要的只是您的根 DIV。

CSS

body{
    background: #D4D9DD url("/site_media/images/bg-1008.png") repeat-y center;
    color:#373737;
    font: 16px/1 Arial;
}
#root {
    background: #FFFFFF;
    color: #000000;
    margin: 0 auto;
    width: 1008px;
}

HTML

<body>
    <div id="root">
        ... all content ...
    </div>
</body>

来吧:http: //jsfiddle.net/XdA92/1/

于 2010-11-13T23:36:18.580 回答
0

试试下面的。

将后台 url 提供给主体,以便它将转到所有页面

#god_container{                                                                                                       
        background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;                           
        margin:auto;                                                                                                      
        position:static;                                                                                                  
    text-align:left;
    width:1008px;                                                                                                   
    } 
于 2010-11-13T14:38:31.297 回答