4

这种布局在网络上几乎无处不在，但似乎没有人提供任何关于它如何工作的信息。我需要将内容居中，并且背景需要扩展页面的整个宽度示例http://www.fuerstlaw.com/（蓝色 bg 颜色扩展了整个宽度）。这是如何使用 CSS 完成的？我觉得这很简单，但就是想不通。

这是我的代码，因为我只是想至少让标题在此链接上工作到该站点的测试页面http://gsringolaw.com/home

body {
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}

#masthead {
    min-width: 100%;
    margin: 0px;
    padding: 0px;
    background-position: 0px 0px;
    background-color: #00304F;
    position: relative;
    z-index: 0;
}
#headertext {
    position: relative;
    width: 250px;
    height: 82px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
    font-size: large;
    top: -41px;
    left: 704px;
}
#glow {
    height: 170px;
    background-image: url('images/glow.png');
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    top: -192px;
    left: -13px;
    width: 973px;
}


#logo {
    position: relative;
    background-image: url('images/gayleringo.png');
    background-repeat: no-repeat;
    width: 528px;
    height: 113px;
    top: 28px;
    left: 0px;
}

<div id="wrapper">
<div id="masthead" style="height: 171px">
    <div id="logo">
    </div>
    <div id="headertext" class="auto-style1">
        Louisiana: 504-975-0180<br />
        <br />
        Florida: 850-292-7059</div>
    <div id="glow">
    </div>
</div>
<div id="top_nav">
</div>
<div id="container">
    <div id="right_col">
    </div>
    <div id="page_content">
    </div>
</div>
<div id="footer">
</div>
</div>
4

8 回答 8

4

要实现这一点，您需要一个包装器和包含内容的实际 div。

<div id="wrapper">
    <div id="content">
        Content
    </div>
</div>

然后你为 the 设置一个背景，#wrapper并给它一个width和margin: 0 autoto#content以使其居中。

#wrapper {
    background: red;
}
#content {
    width: 960px;
    margin: 0 auto;
}

外部 div，因为它的display: block，将扩展到页面宽度的 100%。然后内部 div 以固定宽度居中。所以实际上，背景不是来自内容本身，而是来自包装器。

我喜欢做的是给内部 div 一个类，.inside然后应用到我想要的任何 div。例如：

<div id="header">
    <div class="inside">
        Header
    </div>
</div>
<div id="main">
    <div class="inside">
        Main content
    </div>
</div>
<div id="footer">
    <div class="inside">
        Footer
    </div>
</div>

你可以在这里看到一个例子：http: //codepen.io/joe/pen/bxueF

于 2013-01-06T04:17:54.980 回答
2

在您之外添加另一个div元素#wrapper并将其分配给background-color.

 <div id="full-width">
    <div id="wrapper">
       <div id="masthead" style="height: 171px">
          <div id="logo">
       </div>
          <div id="headertext" class="auto-style1">
             Louisiana: 504-975-0180
         <br>
         <br>
             Florida: 850-292-7059
          </div>
          <div id="glow">
          </div>
        </div>
     </div>
 </div>


 #full-width {
    width: 100%;
    background: #00304F;
 }
于 2013-01-06T02:30:02.867 回答
0

您作为示例的页面使用背景图像。如果你右击页面，Inspect Element，然后查看 Body，你会看到下面的样式被级联了：

body {
  ...,
  background-image: url(images/bg-body.gif);
  background-repeat: repeat-x;
  background-position: 0px 181px;
}
于 2013-01-06T02:29:16.970 回答
0

要么刊头有

width:auto

并且在包装之外

或者包装器和标头广告有

width:auto
于 2013-01-06T02:29:50.883 回答
0

你可以试试。

            <div id="wrapper">
              <div id="banner">
                <div id="banner-inside">
                   <div id="content">content</div>
                </div>
              </div>
            </div>

           //css
           #wrapper{
             width:100%;
           }
           #banner{
             width:100%;
             background-color:blue;
           }
           #banner-inside{
             width:980px;
             margin:0 auto;
           }
           #content{ position:relative; top:0;}
于 2013-01-06T02:32:36.210 回答
0 
#content{
    width: 960px; //tells the div to be exactly 960px wide
    margin: 0 auto; //tells the content to be centered with 0 px to surrounding object
    background-color: red;
}

#background{
    width: 100%; //tells the outer div to be 100% of screen width
    background-color: blue;
}

创建两个 div 的一个，其 id 内容位于名为 background 的内部。

于 2013-01-06T02:33:22.320 回答
0 
    body {height:100%;font-size:12px;}

body, body > section, body > header {width: 100%;margin:0; padding:0;}

.container {width:960px; margin:0 auto;}

header {
  background: #1234ff;
  margin-bottom:3em;}

header .container {
  background: #123456;
  padding: 0 1em;
  *zoom: 1;/* clear floats fix - fix for IE*/}
header .container:after { /* clear floats fix */
  content: ""; display: table;   clear: both; }
/* Logo */
header h1, header h1 a {
  background: url('/images/logo.png') no-repeat; /*set the url of your image and make sure it does repeat*/
  height:60px; /*set this to the height of your logo*/
  width: 175px; /*set this to the width of your logo*/}

/*Now we want to float the logo and the phone number sections so that the appear on the left and right*/
header h1  {float:left;}
header aside {float:right;}
/*make logo clickable, must set anchor to same size as its parent*/
header h1 a {
  display: block;}

header aside {
  background: #123456;
  color:white;
  padding:.5em 1em;
  text-align:right;}

header p {font-size:2em;line-height: .75em;}

html

<body id="wrapper">
  <header>
     <div class="container">
       <!--use css to add image to h1--->
        <h1><a title="company name" rel="bookmark"></a></h1>
       <aside>
         <p>Louisiana: <a>504-975-0180</a></p>
         <p>Louisiana: <a>504-975-0180</a></p>
       </aside>
    </div>
  </header>
  <section>
    <div class="container" id="content">
      <p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  </section>

</body>
于 2013-01-06T03:16:30.327 回答
0

您将需要您的彩色DIV宽度为 100%。在这个DIV地方你剩下的DIV和任何其他元素/图形与一组width和margin。0 auto

#masthead {
min-width: 100%;
margin: 0px;
padding: 0px;
background-position: 0px 0px;
background-color: #00304F;
position: relative;
z-index: 0;
}

#divInsideIt {
width:800px;
margin: 0 auto;
}
于 2013-01-06T02:34:15.440 回答