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

Question

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

整页：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;

    }

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

我清楚吗？

Answer 1

不要使用左右 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/

Answer 2

.bt_woman 和 .bt_man 绝对位于 #wrap_home_bts 中，其宽度设置为 100%。这样#wrap_home_bts 的大小将随着浏览器大小的变化而变化，并且 .bt_woman 和 .bt_man 的位置将跟随此元素。也许 .bt_woman 和 .bt_man 位于 #wrap_home_bts 之外会更好。然后你可以用 JavaScript 为 body 元素设置一些宽度，比如屏幕的宽度。这样他们就永远不会改变调整大小的位置。