Javascript HTML/CSS-如何在容器外部放置左、右div？

我正在开发一个用。我想要的是主容器外的3个div，它有一个响应宽度，但我不知道如何正确地完成

我通过在左和右div之间创建一个不可见的div来完成上面的图像，该div将它们推向两侧。我觉得这不是一个好方法，因为它需要JavaScript或CSS来设置它们之间不可见div的正确宽度。顶部div放置在容器内，因此它使用其宽度。这就是代码：

    <div class="outside-mid" style="background-color:#333;width:100%;height:300px;"><a href="http://example.com">Lorem ipsum dolor sit amet.</a></div>
    <div id="outside-container" style="position:absolute;text-align:center;height:0;width:1144px;">
        <div class="outside-left" style="background-color:#333;width:300px;height:600px;float:left;margin-left:-310px;"><a href="http://example.com">Lorem ipsum dolor sit amet.</a></div>
        <div class="outside-right" style="background-color:#333;width:300px;height:600px;float:right;margin-right:-310px;"><a href="http://example.com">Lorem ipsum dolor sit amet.</a></div>
    </div>

我使用JS设置容器外部的宽度：

<script>
    var width = document.getElementById('main').offsetWidth;
    document.getElementById("outside-container").style.width = width + "px";
</script>

var width=document.getElementById（'main'）.offsetWidth；
document.getElementById（“外部容器”）.style.width=width+“px”；

---

我想问的是，是否有一种方法可以将左、右div放在容器内，然后，不使用任何不可见的div来推动它们，只将它们浮动到容器外的左、右位置。通过这种方式，它将得到响应，因为它将始终使用容器宽度。

将html设置为如下所示

<div id="outside-container">
    <div class="outside-left"></div>
    <div class="main-div"></div>
    <div class="outside-right"></div>
</div>

---

请你可以使用这个代码

---

这里有很多很好的答案，但我发现使用我已经安装的相同主题很难实现它们。在研究了更多的解决方案后，我找到了一种适合我的案例的方法。我将以下内容放在容器中，它在不改变当前布局的情况下工作

    <style>
    #left:before, #right:before, #top:before  {
        position:absolute;
        content: "Ads";
        top:-20px;
        color: #fff;
    }
    #left:before  {
        right:0;
    }
    .site {
        overflow:visible;
        position:relative;
        top:340px;
    }
    </style>

    <div id="top" style="position: absolute; width:100%; height:300px; top:0; background-color:#888;margin-top:-310px;"></div>
    <div id="left" style="position: absolute; width:300px; height:600px; left: 0; top: 0; background-color:#888;margin-left:-310px;"></div>
    <div id="right" style="position: absolute; width:300px; height:600px; right: 0; top: 0; background-color:#888;margin-right:-310px;"></div>

#左：前，#右：前，#上：前{
位置：绝对位置；
内容：“广告”；
顶部：-20px；
颜色：#fff；
}
#左：以前{
右：0；
}
.地点{
溢出：可见；
位置：相对位置；
顶部：340px；
}

注：.site指父级（容器）

<div id="outside-container" style=" background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;display: table; height: 0; margin: 0 auto; text-align: center; width: 1144px;">
    <div class="outside-left" style=" background-color: #333333;float: left; height: 600px; transform: translateX(-100%); width: 300px;"><a href="http://example.com">Lorem ipsum dolor sit amet.</a></div>
    <div class="outside-right" style="background-color: #333333; display: inline-block; float: right; height: 600px; margin: 0 auto; transform: translateX(100%); width: 300px;"><a href="http://example.com">Lorem ipsum dolor sit amet.</a></div>
</div> 

    <style>
    #left:before, #right:before, #top:before  {
        position:absolute;
        content: "Ads";
        top:-20px;
        color: #fff;
    }
    #left:before  {
        right:0;
    }
    .site {
        overflow:visible;
        position:relative;
        top:340px;
    }
    </style>

    <div id="top" style="position: absolute; width:100%; height:300px; top:0; background-color:#888;margin-top:-310px;"></div>
    <div id="left" style="position: absolute; width:300px; height:600px; left: 0; top: 0; background-color:#888;margin-left:-310px;"></div>
    <div id="right" style="position: absolute; width:300px; height:600px; right: 0; top: 0; background-color:#888;margin-right:-310px;"></div>