0

我想创建 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;
}

​</p>

4

4 回答 4

1

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

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

于 2012-12-10T17:23:02.450 回答
1

你将不得不使用%来实现这一点。px是固定大小并且%是静态的。

于 2012-12-10T17:24:43.950 回答
1

给width:75%每个头条。根据您的需要更改宽度百分比。

于 2012-12-10T17:25:42.770 回答
1

你想要这样的东西吗？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>
于 2012-12-10T17:26:17.370 回答