Question

首先，抱歉这个愚蠢的问题。我在HTML上非常糟糕。

我有这个页面。 http://www.places4two.de/如果您调整窗口大小，右侧的广告div与主容器重叠，我想要的是使此广告相对于主容器div，如果您调整大小，它应该在它点击时停止主要容器。我怎样才能做到这一点。

这是我试过的：

 position: relative

和

 position: fixed

但他们没有帮助。

Answer 1

adsense的宽度为160px，您可以将主容器宽度设置为，

width: calc(100% - 160px);

这是小提琴：

<强> http://jsfiddle.net/jzwjP/2/

将是它的原型，adsense宽度保持不变160px，而大容器宽度将根据您的浏览器调整大小，将通过浏览器宽度减去adsense宽度来计算。

Answer 2

我可能会将主要内容容器和广告放在同一个容器中。我们称这个容器为“包装器”。 #wrapper的宽度应等于主内容容器的宽度加上广告的宽度，加上两者之间的边距以及边框。它可以使用“auto”的左右边距在体内居中。

现在在“包装器”中你可以向左浮动主内容容器，向右浮动广告容器，或者你可以使用相对于#wrapper的绝对定位：

#wrapper {
    width: 1310px;
    margin: 0 auto;
    position: relative;
}

#main-content {
    width: 1100px;
    position: absolute;
    left: 0;
}

#ad {
    width: 170px;
    position: absolute;
    right: 0;
}

希望有所帮助。

如何使这个div相对于主容器的位置

2 个答案: