html - 如何创建横跨屏幕 75% 的水平条，但随着屏幕大小的调整而拉伸(stretch)？

Question

我想创建 3 个位于页面顶部的水平条。

我想要实现的是让条形图位于屏幕边缘到页面宽度的大约 75% 处。

顶部栏右对齐，中间栏左对齐，底部栏再次右对齐。

我想让条形图在页面的中间相互重叠(大约 25% - 因此宽度为 75%)，但是如果随后调整窗口大小，条形图需要在页面中保持静态页面中间，但拉伸(stretch)它们以调整大小以保持与页面边缘对齐。

我这里有一个初始设置的例子:http://jsfiddle.net/headshot_harry/LsNby/2/

但如您所见，当窗口调整大小时，条形图仍与页面边缘对齐，但它们在中间并不是静态的。我需要它们调整大小或“拉伸(stretch)”，同时保持屏幕中间的重叠部分完好无损。

代码如下:

HTML

<div id="headerBar1"></div>
<div id="gap"></div>
<div id="headerBar2"></div>
<div id="gap"></div>
<div id="headerBar3"></div>
<div id="content"></div>​

CSS

#gap {
    width: 100px;
    height: 3px;
    border: 0px solid black;
}

#content {
    width: 600px;
    margin: 10px auto;
    background: #ccc;
    border: 1px solid black;
    height: 100px
}

#headerBar1 {
    height: 40px;
    background: blue;
    width: 400px;
    margin-left: auto;
}
#headerBar2 {
    height: 40px;
    background: blue;
    width: 400px;
}

#headerBar3 {
    height: 40px;
    background: blue;
    width: 400px;
    margin-left: auto;
}

Answer 1

我认为你需要使用 % 而不是 px

http://jsfiddle.net/headshot_harry/LsNby/2/