Question

我有一个包装器div（#main-wrapper）和一个水平居中（#image）的div。它包含一个大图像。

我想在右下角有一个div覆盖#image（#thumbs）。

这就是我所拥有的：

<div id="main-wrapper">
    <div id="image">
        <img src="img.jpg" />
    </div>
    <div id="thumbs">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
   </div>
</div>

div#main-wrapper
{
    width: 100%;
    background-color: #000000;
    position: relative;
}

div#main-wrapper div#image
{
    margin: 0 auto;
    width: 800px;
    height: 600px;
    background-color: #1D9DDD;
}

div#main-wrapper div#thumbs
{
    position: absolute;
    width: 600px;
    height: 400px;
    background-color: #FF212C;
    bottom: 0;
    right: 0;
}

问题是#thumbs位于＃main-wrapper的右下角，而不是居中div的中心。

你可以看到我在这里做的事：http://jsfiddle.net/22NnS/1/

Answer 1

如果我理解正确，那么这将有效。将thumb div放在图像容器中，如下所示：

<div id="main-wrapper">
    <div id="image">
        <img src="img.jpg" />
        <div id="thumbs">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>

</div>

然后改变位置：relative定义的位置：

div#main-wrapper
{
    width: 100%;
    background-color: #000000;
}

div#main-wrapper div#image
{
    margin: 0 auto;
    width: 800px;
    height: 600px;
    background-color: #1D9DDD;
    position: relative;
}

div#main-wrapper div#thumbs
{
    position: absolute;
    width: 600px;
    height: 400px;
    background-color: #FF212C;
    bottom: 0;
    right: 0;
}

将绝对定位的div对齐

1 个答案: