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固定サイズで%静的です。

于 2012-12-10T17:24:43.950 に答える
1

width:75%各ヘッドバーに与えます。必要に応じて幅のパーセンテージを変更します。

于 2012-12-10T17:25:42.770 に答える
1

%代わりに使用する必要があると思いますpx

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

于 2012-12-10T17:23:02.450 に答える
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 に答える