Question

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

<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正常工作。

Answer 1

我假设您希望这3个div用不同的内容填充每个div，外部填充流畅或多线。否则，答案可能是很多 ^1）更简单。我还假设中心div定义了标题的总高度。

考虑到这两个问题，仍然可以想到几个不同的场景，我将给出4个例子，您可以从中选择最合适的解决方案。

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;

<强> See demonstration fiddle

^1）当在浏览器窗口外侧面可能部分不可见时（如果您将de left div中的内容与右侧对齐，反之亦然），那么我建议在 this fiddle demo ，根本不需要绝对定位，以便在所有情况下都能正确清除标题下方的任何内容。

Answer 2

如果我找到你，那么这可能是一个可能的解决方案。

#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将元素绝对推向50%左侧，然后使用width/2的负边距，在您的情况下480px将其定位在中心

HTML中元素的顺序对于这个黑客很重要。

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

如果您不想使用z-index，#center DIV 必须是最后一个元素。

这是一个fiddle来测试它。

Answer 3

你必须使用填充和框模型+位置：相对来修复它 - 它可以在没有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/ 编辑错误的例子

Answer 4

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>

CSS：

#Header_Container {
    position: relative;
    width: 100%;
}

#Header_Container > div {
    height: 158px;                /* height of the image */
}

.Header_Side {
    position: absolute;
    width: 50%;
}

#Header_Left {
    left: 0;
    background-color: blue;
}

#Header_Right {
    left: 50%;
    background-color: green;
}

#Header_Center {
    position: relative;
    width: 158px;                 /* width of the image */
    margin: 0 auto;
    background-image: url('...');
}

另见this example。

Answer 5

这有效，但您需要更改HTML：http://jsfiddle.net/gG7r7/1/

<强> 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>

<强> CSS

#header_content_container {
  position:absolute;
  z-index:1;
  width: 100%;
  height: 100%;
}

#header_content {
  width: 960px;
  margin: 0 auto;
  background: red;
  height: 100%;
}

#header_left {
  background: white;
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 0;
}

#header_right {
  background: black;
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 0;
}

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

5 个答案: