html - 调整窗口大小广告将 div 保持在同一位置

Question

嗯..我的英语不好，所以我画了我想要的..

全页:http://d-3.me/full.jpg

绿色容器是我的内容包装。黑色和红色方 block 是一些用于访问其他页面的按钮。

所以当我调整页面大小时，我想将这些按钮保留为另一个图像:

1024 像素窗口 View :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;

    }

但这样一来，“按钮的”伴随着调整大小的窗口。

我清楚了吗？

Answer 1

与其使用左右 0px 定位 block ，不如将它们定位到 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/