2

我正在尝试为具有多种背景颜色和图像的网站制作标题。左侧是棕褐色渐变和徽标图像，右侧是渐变为蓝绿色的旭日形/云图像，如下所示。

标题

左侧（徽标）部分应为 230 像素宽，右侧（朝阳部分）应为 770 像素宽，总共 1000 像素，并且应该居中。左侧棕褐色渐变应该延伸到浏览器的左边缘，而蓝绿色应该延伸到右边缘。

我试图用百分比来做到这一点：

CSS：

#header {
  height: 105px;
  min-width: 1000px;
}
#header .left {
  width: 31%;
  background: url(../images/header_left_gradient.png) bottom left repeat-x;
  height: 105px;
  float: left;
}
#header .left #logo {
  float: right;
  width: 230px;
}
#header .right {
  width: 69%;
  background: url(../images/header-right.png) bottom left no-repeat #009eb0;
  height: 105px;
  float: left;
}

HTML：

  <div id="header">
    <div class="left">
      <div id="logo">
        <img src="./media/images/logo.png" alt="">
      </div>
    </div>
    <div class="right">
      Text
    </div>
  </div>

这几乎奏效了，但标题并没有在宽浏览器中保持居中。

小提琴

4

3 回答 3

3

设置页眉边距和宽度： 

#header {
    height: 105px;
    margin: 0 auto;
    min-width: 1000px;
    width: 100%;
}


#header .left {
    background: none repeat scroll 0 0 #FF00FF;
    float: right;
    height: 105px;
    width: 31%;
}


#header .right {
    background: url("../images/header-right.png") no-repeat scroll 0 0 #009EB0;
    float: left;
    height: 105px;
    width: 69%;
}

这对我有用。

于 2013-02-20T16:40:20.047 回答
0

有点hacky，但这应该可以解决问题：

body {
    text-align: center;
}

#header {
    display: inline-block;
    height: 105px;
    margin-left: auto;
    margin-right: auto;
    min-width: 1000px;
    text-align: left;
}

您可以使用包装器 div 来应用文本对齐而不是正文，但我发布了这个以防您不想更改结构。

于 2013-02-20T16:57:11.777 回答
0

我最终以一种 hacky 的方式解决了这个问题。首先，我像@Raad 建议的那样在标题周围添加了一个容器，然后在里面添加了另外两个 div 来保存我的颜色：

<div id="header-wrap">
  <div id="filler-left">
  </div>
  <div id="filler-right">
  </div>
  <div id="header">
    <div class="left">
      <div id="logo">
        <img src="./media/images/logo.png" alt="">
      </div>
    </div>
    <div class="right">
      Text
    </div>
  </div>
</div>

然后是CSS：

#header-wrap {
  width: 100%;
  position: relative;
}
#header-wrap #filler-left {
  left: 0;
  width: 50%;
  position: absolute;
  height: 105px;
  background: url(../images/header_left_gradient.png) bottom left repeat-x;
}
#header-wrap #filler-right {
  left: 50%;
  width: 50%;
  position: absolute;
  height: 105px;
  background: #009eb0;
}
#header {
  height: 105px;
  width: 1000px;
  margin: 0 auto;
  position: relative;
}

并将我的 .left 和 .right div 设置为固定宽度。效果很好。不是我理想的解决方案，但它有效。

于 2013-02-20T17:37:07.627 回答