0

うーん.. 私の英語は苦手なので、好きなものを描きます..

フルページ: http://d-3.me/full.jpg

緑色のコンテナはコンテンツ ラップです。黒と赤の四角は、別のページにアクセスするためのボタンです。

だから私はページのサイズを変更するとき、私はこれらのボタンをこの別の画像のように保ちたい:

1024px ウィンドウ ビュー: http://d-3.me/1024.jpg

これは私の最初の HTML です:

<div id="wrap_home_bts">
    <div class="bt_woman"></div>
    <div class="bt_man"></div>
</div>

これは私のcssです：

#wrap_home_bts{
    position:relative;
    width:100%;
    height:100%;
}

    .bt_woman{
        width:880px;
        height:389px;
        background:#FFCC00;

        position:absolute;
        left:0;
        bottom:245px;

    }

    .bt_man{
        width:733px;
        height:168px;
        background:#CC00FF;

        position:absolute;
        right:0;
        bottom:74px;

    }

しかし、このように、「ボタン」はサイズ変更されたウィンドウを伴います。

クリア？

4

2 に答える 2

0

.bt_woman と .bt_man は、幅が 100% に設定された #wrap_home_bts に絶対配置されます。そうすれば、#wrap_home_bts のサイズはブラウザのサイズ変更で変化し、.bt_woman と .bt_man の位置はこの要素に従います。たぶん、.bt_woman と .bt_man は #wrap_home_bts の外にある方がよいでしょう。次に、画面の幅のように、javaScript を使用して body 要素に幅を設定できます。そうすれば、サイズ変更時に位置が変わることはありません。

于 2013-03-29T16:08:27.863 に答える
0

左右の 0px を使用してブロックを配置する代わりに、ブロックを 50% に配置してから、負のマージンを使用して希望どおりに配置します。これは機能するはずですが、必要に応じてマージンを調整する必要があります。

#wrap_home_bts{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;

}

.bt_woman{
    width:880px;
    height:389px;
    background:#FFCC00;
    display: block;
    position:absolute;
    left:50%;
    margin-left: -650px;
    bottom:245px;

}

.bt_man{
    width:733px;
    height:168px;
    background:#CC00FF;

    position:absolute;
    display: block;
    left:50%;
    margin-right: -650px;
    bottom:74px;

}

http://jsfiddle.net/E4mmz/

于 2013-03-29T16:06:13.960 に答える