2

我想重新创建以下标题：

问题是内容在白色部分居中。灰色是正文的背景，标题是屏幕的 100%。

我现在拥有的是：

CSS

.top_left {
  background:#3c4d74;
}

.top_right {
  background:#2f3a5a;
}

.top_center {
  background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
  height:140px;
}

#page, 
.top_center {
  max-width:1000px;
  margin:0 auto;
}

#page {
  background:#FFF;
}

body {
  background:#DEDEDE;
}

HTML

<body>
    <div id="top-header">
        <div class="top_left"></div>
        <div class="top_center">
            <a href="#">LOGO</a>    
        </div>
        <div class="top_right"></div>
    </div>
    <div id="page" class="hfeed">
        MY content bla bla bla
    </div>    
</body>​​​​​​

您可以在http://jsfiddle.net/gTnxX/上看到它（我将最大宽度设置为 600 像素而不是 1000 像素，以便您可以在小提琴上看到它）。

如何在任何分辨率下使左侧软蓝色和右侧硬蓝色？

4

1 回答 1

1

为此，您需要非常了解定位的工作原理。

的#header-bg位置使其低于#wrapper。它是 100% 宽，140px 高，有 2 个 div，它们都占用了 50% 的空间，并且它们的左/右颜色都不同。

的#wrapper相对定位是为了z-index工作，把它放在上面#header-bg。宽度设置为 600 像素，并将margin: 0 auto;其居中。

这#header是一个简单的 div，它设置了高度和所需的背景。

内容遵循#header正常流程。

这是一个带有请求行为的jsfiddle。

http://jsfiddle.net/sg3s/cRZxN/

如果内容大于屏幕，这甚至可以很好地降级并让您水平滚动（我从原始 jsfiddle 中注意到了这一点）。

编辑：

To make it IE7 compatible I made some changes to fix 2 bugs. I had to add left: 0; and top: 0; explicitly to #header-bg to fix a positioning bug. Made the divs inside #header-bg 49% instead of 50% or else IE7 would not resize them properly and make the right div bump down. To compensate for the small gap that created I made the right div float: right;.

于 2012-06-16T18:37:11.117 回答