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

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 的宽度应该等于主内容容器的宽度加上广告的宽度，再加上两者之间的边距，再加上边框。它可以使用“自动”的左右边距在正文中居中。

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

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

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

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

希望有帮助。