Css 三个div，其中两个具有动态宽度

我尝试的是让标题图像集中在顶部，两侧有不同的颜色背景，动态填充页面的其余部分。结构如下所示：

<div id="Header_Container">
  <div id="Header_Left"></div>
  <div id="Header_Center"></div>
  <div id="Header_Right"></div>
</div>

页眉_中心为

960px

，页眉_左侧和页眉_右侧应填充图像的任一侧至页面边缘，并随着页面宽度的变化而改变宽度

---

我无法让CSS正常工作。

我假设您希望这3个div分别填充不同的内容，外部填充流畅或多行。否则答案可能会简单得多。我还假设中心div定义了收割台的总高度

考虑到这两种假设，仍然可以考虑一些不同的场景，我将给出4个示例，您可以从中选择最合适的解决方案

​#container {
    width: 100%;
    height: 150px;
}

#left {
    position: absolute;
    left: 0;
    width: 50%;
    height: 150px;
    background-color: #FF0000;
}

#right {
    position: absolute;
    right: 0;
    width: 50%;
    height: 150px;
    background-color: #0000FF;
}

#center {
    position: absolute;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: 150px;
    background-color: #888888;
}
​

HTML完全是你的

CSS看起来像：

#Header_Container {
    width: 100%;
    position: relative;
}
#Header_Left {
    position: absolute;
    left: 0;
    right: 50%;
    margin-right: 480px;
}
#Header_Right {
    position: absolute;
    left: 50%;
    right: 0;
    margin-left: 480px;
    top: 0;
}
#Header_Center {
    width: 960px;
    position: relative;
    left: 50%;
    margin-left: -480px;
}

现在，您可以通过一些额外的样式来改变左右两侧的行为：

    height: 100%;
    overflow: hidden;

---

1） 当侧面在浏览器窗口外可能部分不可见时（如果您要将de left div中的内容向右对齐，反之亦然），然后，我建议在中使用不需要绝对定位的解决方案，以便在任何情况下都能正确清除标题下的任何内容。

如果我没有弄错，那么这可能是一种可行的解决方案

​#container {
    width: 100%;
    height: 150px;
}

#left {
    position: absolute;
    left: 0;
    width: 50%;
    height: 150px;
    background-color: #FF0000;
}

#right {
    position: absolute;
    right: 0;
    width: 50%;
    height: 150px;
    background-color: #0000FF;
}

#center {
    position: absolute;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: 150px;
    background-color: #888888;
}
​

#left

基本上表示元素将被绝对定位，并以

50%的宽度连接到左侧。同样适用于右侧的
#right

#center
将元素绝对推到左侧，然后以
宽度/2
的负边距定位元素，在您的情况下，该边距为
480px
，以将其定位在中心

HTML中元素的顺序对于这种攻击很重要

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
    <div id="center"></div>
</div>​


​

如果不想使用z索引，则
#center
DIV必须是最后一个元素

下面是一个测试方法。
HTML：

<div id="Header_Container">
    <div class="Header_Side" id="Header_Left"></div>
    <div class="Header_Side" id="Header_Right"></div>
    <div id="Header_Center"></div>
</div>

另请参见。
这是可行的，但您需要更改HTML：

HTML

<div id="header_background_container">
    <div id="header_left"></div>
    <div id="header_right"></div>
</div>
<div id="header_content_container">
    <div id="header_content"><p>Content goes here</p></div>
</div>

您必须使用padding和box model+position:relative来修复它-这可以在不更改HTML的情况下完成

<div id="Header_Container">
  <div id="Header_Left"></div>
  <div id="Header_Right"></div>
  <div id="Header_Center"></div>
</div>

这里就是一个例子
编辑了错误的示例
对不起，我把它弄坏了。左侧和右侧分区中的内容已消失，.聪明！说真的，+1，这是
position:absolute
=D@NGLN我不知道我会不会叫它“破坏它”。左侧和右侧div中没有内容要求。而且，内容会消失在中间分区的下方。你是认真的吗。哦，忘了更新示例-现在它工作正常了。很好，+1。但是你应该提到这需要CSS3。对不起，不起作用。右侧的内容已模糊？抱歉，但我认为左侧和右侧分区中的内容应该保持可见，现在它位于中间分区。部分覆盖侧面与问题不矛盾。：-）但是增加利润（比如在你的答案中）是一个更好的解决方案。谢谢你的评论。我用一种不使用绝对定位的局部覆盖边解决方案进行了编辑。
<div id="Header_Container">
  <div id="Header_Left"></div>
  <div id="Header_Right"></div>
  <div id="Header_Center"></div>
</div>

#Header_Container{ overflow: hidden; height: 100px; } 
#Header_Container *{ box-sizing: border-box; height: 100%; } 
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }