Javascript 保持广告部门的视野

我不得不（不幸地）把我们的广告放到我们的网站上。它们位于页面右侧下方，内容区域之外

当屏幕宽度变小时，因为它位于内容之外，它们会被浏览器切断。我可以通过将

左移：-someValuepx

来抵消所有内容，这会移动所有内容

我可以用Javascript自动将它们保留在视图中，而不必输入大量的媒体查询来保持它的轻微移动吗？理想情况下，我希望有一个函数可以在页面加载时运行，然后在窗口调整大小事件中运行

这里是目前CSS的一部分。编辑#容器左属性以移动内容

下面是代码（我相信如果您链接到JSFIDLE，它是必需的）

HTML

<div id="container">
    <div id="ads">
    </div>
    <div id="content">
    </div>
</div>

---

您可以做的是在JS中创建一个函数，该函数在加载文档和调整大小时执行一次

这个函数应该在广告中添加一个类（即：hidden）。你想隐藏，用CSS给出正确的属性。只需addClass和removeClass，根据情况而定，就可以成功

例如：

#ads { // normal values that makes the content of the ads visible } 

#ads .hide  { // offset values to hide the ads }

这样，您可以将行为和表示分离

---

希望有帮助

如果将div结构更改为以下内容，我有一个纯css解决方案：

<div id="container">
    <div class="padding">
        <div id="ads"></div>
        <div id="content"></div>
    </div>
</div>

当视口调整大小时，这将使添加保持在视图中

---

在html标记中，内容和广告都在一个容器中。问题在于内容占据了容器的所有空间，而广告则位于容器外部

---

只需在整个容器中放置内容和广告，然后适当地定位它们。在内容+广告（660px）的宽度上做一个断点，你可以将广告定位在内容下方，并给容器提供当前宽度（500px）。

如果你总是在视图中需要它们，你可以使用固定定位。这难道不意味着当视图变小时，它们会掩盖内容吗？非常好：），我现在就试试，把它放到我的网站上，然后再报告。好东西，很高兴我能帮上忙

<div id="container">
    <div class="padding">
        <div id="ads"></div>
        <div id="content"></div>
    </div>
</div>

#container {
    width:670px;
    min-height:100px;
    margin:0px auto;
    position:relative;
}

#container > .padding {
    margin-right:170px;
    background-color: firebrick;
}

#ads {
    background-color:red;
    position:absolute;
    top:0;
    right:0;
    width:160px;
    min-height:100px;
}

#content {
    width:100%;
    background-color:green;
    min-height:100px;
}

@media (max-width:670px) /*this is the width of the container*/
{
    #container {float:right;}
}