Question

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

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

因此，当我调整页面大小时，我希望将这些按钮保持为另一个图像：

这是我最初的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元素设置一些宽度，就像屏幕的宽度一样。这样他们永远不会改变调整大小的位置。

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

2 个答案: