在同一个div中的不同颜色背景

Question

我觉得这应该比我制作它容易得多......我正在寻找一种解决方案，从左侧延伸出1个纯色，并以徽标结束，然后再使用第二个纯色一直到右边。我希望包装器div扩展100％。如下所示：

<div id="header-wrap"><!--100% page width-->
  <div id="header"><!--1000px centered fixed width-->
    <div id="logo"></div><!-- align left-->
    <div id="nav"></div><!-- align right-->
  </div>
  <div id="sub-header-wrap">
    ...
  </div>
</div>

这是一张显示我的意思的图片：

Answer 1

有很多内容。

让我首先找到一个工作小提琴的链接： JSFiddle

---

我该如何解释？

基本上我有两个全宽div，它们具有完整的背景色。在这两个div中，我有一个被分类为.inner的div，它有80％的宽度（可以是你想要的任何东西），与边缘对齐到中心。

在.inner内部，我有一个左侧div和一个适当大小的右侧div来包含徽标/导航。在左侧div中，我有另一个div .shade，它会使标题的左侧变暗。

.left div相对定位且.shade div绝对定位。

CSS：

body{
    margin: 0;
}

header
{
    display:block;
    width: 100%;
}

header .top
{
    background: #00a;
    text-align: center;
    color: white;
}

header .inner
{
    width: 80%;
    margin: 0 10%;
    text-align: left;
}

header .inner .logo, header .inner .left
{
    display: inline-block;
    width: 20%;
    margin: 0;

    text-align: center;
    height: 100%;

    padding: 10px 0px;
    position: relative;
    z-index: 1;
}

header .inner .right
{
    display: inline-block;
    width: 78%;
    margin: 0;

    text-align: right;
}

header li
{
    display: inline-block;
    list-style: none;
}

header .bottom
{
    background: #ca0;
}

header .shade
{
    width: 1000%;
    height: 100%;

    position: absolute;
    top: 0px;
    right: 0px;

    background: rgba(0, 0, 0, .3);
    z-index: -1;
}

HTML：

<header>
    <div class="top" align="center">
        <div class="inner">
            <div class="logo">
                Logo
                <div class="shade"></div>
            </div>     
            <div class="right">
                <li>Nav 1</li>
                <li>Nav 2</li>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="inner">
            <div class="left">
                Subtext
                <div class="shade"></div>
            </div>
            <div class="right">
                <li>Link</li>
            </div>
        </div>
    </div>
</header>

Full JSFiddle

Answer 2

如果我理解正确，请在单独的CSS文件或<style>块中尝试此类操作。它没有经过测试，抱歉。

#header {
  margin: 0 auto; /* for centering */
  width: 1000px;
}
#logo {
  float: left;
  width: 250px; /* for example */
  background-color: red; /* for example */
}
#nav {
  float: right;
  width: 750px; /* for example */
  background-color: blue; /* for example */
}

更新：

如果你能买得起CSS3，那么this post对你来说也很有意义。