如何在屏幕上创建75％的水平条，但在屏幕大小调整时拉伸？

Question

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

我想要实现的是让条形从屏幕边缘坐到页面宽度的大约75％。

顶部条向右对齐，中间条向左对齐，底部条向右对齐。

我想得到这些条形，使它们在页面中间相互重叠（约25％ - 因此宽度为75％），但是如果窗口然后调整大小，则条形图需要保持静态。在页面的中间，但是拉伸以便它们调整大小以保持与页面边缘保持对齐。

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

但是正如您所看到的，当调整窗口大小时，条形图与页面边缘保持对齐，但它们在中间不是静态的。我需要它们调整大小或“伸展”，同时保持屏幕中间的重叠完整。

以下代码：

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/

Answer 2

您必须使用%来实现此目的。 px是固定大小，%是静态的。

Answer 3

将width:75%添加到每个标题栏。根据您的需要改变宽度百分比。

Answer 4

你想要这样的东西吗？ http://jsfiddle.net/LsNby/6/

CSS：

.header-bar{
    height:40px;
    background:blue;
    margin-bottom:4px;
    position:relative;
}

.header-bar.left{
    right:25%;
}

.header-bar.right{
    left:25%;
}

我在html中添加了类：

<div id="headerBar1" class="header-bar right"></div>
<div id="headerBar2" class="header-bar left"></div>
<div id="headerBar3" class="header-bar right"></div>