css – 三个DIV,其中两个具有动态宽度

我想要的是在顶部居中的标题图像,两侧有不同的颜色背景,动态填充页面的其余部分.结构看起来像这样：

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

Header_Center为960px,Header_Left和Header_Right应将图像的任一侧填充到页面边缘,并随页面宽度的变化更改宽度.

我无法使CSS正常工作.

解决方法

您必须使用填充和框模型位置来修复它：相对 – 它可以在没有HTML更改的情况下完成

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

和CSS(例如100px)

#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%; }

示例在这里是http://jsfiddle.net/ZAALB/2/编辑错误的例子