Css 将div定位到中心容器的侧面

我的页面内容有一个主容器DIV，水平居中：

HTML:

客户希望在页面的两侧、master_容器之外都有广告。我尝试了各种CSS来尝试定位这些div，但当窗口调整大小时，它们与master_容器重叠。另外，我被要求在页面滚动时让它们浮动

谁能告诉我正确的解决方法吗？提前谢谢…

怎么样：

演示：

HTML

广告
广告
真正的内容…

CSS

身体{
宽度：100%；
}
#主集装箱{
位置：相对位置；
宽度：960px；
高度：500px；
保证金：0自动；
边框：1px纯红；
}
广告部{
位置：绝对位置；
顶部：0px；
宽度：200px；
高度：400px；
保证金：0px 0px 0px 0px；
边框：1px纯蓝色；
}
左分区{
左：-220px；
}
右分区{
右：-220px；
}

编辑：它是如何工作的

---

当您相对定位主元素时，它不会从其内容中的流中取出，但它会为定位、z索引等打开一个新空间。因此，此容器中具有绝对位置的子元素与其父元素的位置相关。因此，在本例中，“ad”元素的宽度为200px，左侧为-220px，它在容器的左侧移动，并添加了一点“边距”。

>那么，当调整大小时没有空间容纳广告时，广告会发生什么？它们现在包裹在master_容器上，但这不是我们想要的。。。它们应该隐藏吗？它们应该隐藏起来，就像没有足够的空间放置master_容器时发生的一样。客户端希望在页面的两侧都有广告+在页面滚动时让它们浮动。我没有得到“浮动”部分。你的意思是滚动时它们应该一直可见？就像被固定在他们的垂直位置一样？我已经用左右两侧的广告更新了答案。你能用JavaScript吗？像

onscroll

更改两个广告容器的

top

值？好像有4行jQuery。似乎OP必须使用JS，因为他不能同时拥有

固定

和

绝对

定位。我已经更改了我的答案，因为这个解决方案完全符合我的要求。另外，+1表示使用@media来消失广告。。对于计算保证金的解释，@Emin我已经编辑了答案，并添加了jQuery的可能性！好了，停下来，布拉姆！你会受伤的！：）我真的很感激你的回答。这是“教学”，而不是令人信服的复制/粘贴。。。我确实从中吸取了教训。非常感谢@Emin这就是我试图做或推广的：让人们学习而不是复制粘贴东西。很高兴它能起作用，我能帮上忙！

<div id="master_container">
  .. my content here ...
</div>

#master_container {width: 960px; margin: 0 auto;}

<div id="master_container">
    <div class="ad left">Advertising</div>
    <div class="ad right">Advertising</div>
    The real content …
</div>

<style>

    body {
        width:      100%;

    }

    #master_container {
        position:   relative;
        width:      960px;
        height:     500px;
        margin:     0 auto;
        border:     1px solid red;
    }

    div.ad {
        position:   absolute;
        top:        0px;
        width:      200px;
        height:     400px;
        margin:     0px 0px 0px 0px;
        border:     1px solid blue;
    }

    div.ad.left {
        left:       -220px;
    }

    div.ad.right {
        right:      -220px;
    }

</style>

.advertis {
    position: fixed; /*creates floating effect */
    top: 20px; /* divs will always stay 20px from top */
    width: 220px;
    padding: 10px;
    background: white;
    border: #ccc 1px solid;
    border-radius: 4px;
}

#left {
    margin-left: -613px; left: 50%; /* positioning of left ads */
} 

#right {
    margin-right: -613px; right: 50%; /* positioning of right ads */
} 

function widthCheck() {
    var ads = $(".advertis");

    if ($(window).width() < 1225) {
        ads.hide();
    }
    else {
        ads.show();
    }
}

widthCheck(); // Execute onLoad

$(window).resize(function(){
    widthCheck();  // Execute whenever a user resizes the window
});