一个或两个广告取决于窗口宽度-这可能吗

Question

我希望你能帮我做这个，因为我对HTML、CSS等知之甚少https://www.mitologia.pt/(，我们正在使用Adsense。在页面底部，我们想添加一个匹配广告和一个显示广告，但目前一个在另一个后面(这看起来很可怕(。相反，我们想这样做：

• 如果窗口宽度小于500px，则只能看到Matched Ad
• 如果窗口宽度超过500px，无论窗口大小如何，我们都希望在右侧显示300x250的Display广告，并将所有剩余空间用于Matched广告(左侧(

有可能这样做吗？如果是，如何？这是我目前的解决方案，它可以完美地工作在500px以上，但在500px以下根本不工作…

<div style="margin-top: -12px; float: left; width: calc(100% - 300px);">
<!-- Recommendations -->
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="XXX"
data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br />
</div>
<!-- THIS IS FOR THE AD ON THE RIGHT -->
<div style="margin-top: -12px; float: right; width: 300px;">
<!-- fim da página -->
<style type="text/css">
.adslot_1 { display:inline-block; width: 300px; height: 250px; }
@media (max-width:500px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 300px; height: 250px; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="XXX"
data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br />
</div>

Answer 1

好吧，这就是您的内联样式div:

<div style="margin-top: -12px; float: left; width: calc(100% - 300px);">

我的想法是尝试这个：

<div class='yourNameOfClass' style="margin-top: -12px; float: left;">
<style type="text/css">
.yourNameOfClass
{
width: calc(100% - 300px);
}
@media (max-width:500px) 
{
.yourNameOfClass
{
width: /*wharever you wish here*/!important;
}
}
</style>

问题是我在你的网站上看不到任何广告，所以我无法准确地想象的问题

Answer 2

在@Kida的帮助下，我终于解决了这个问题。这是最后的代码，因为它可能在未来帮助其他人：

<div class='leftBottomAd' style="float: left;">
<style type="text/css">
.leftBottomAd { width: calc(100% - 300px); }
@media (max-width:800px){ .leftBottomAd { width: 100% !important;}}
</style>
<!-- Recommendations -->
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="XXX"
data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>  </div>
<div style="float: right; width: 300px;">
<!-- Bottom Ad -->
<style type="text/css">
.adslot_1 { display:inline-block; width: 300px; height: 250px; }
@media (max-width:800px) { .adslot_1 { display: none; } }
@media (min-width:800px) { .adslot_1 { width: 300px; height: 250px; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="XXX"
data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br/></div>