时间戳

首页 > 解决方案 > 取决于窗口宽度的一两个广告 - 可能吗？

html - 取决于窗口宽度的一两个广告 - 可能吗？

问题描述

我希望你能帮我解决这个问题，因为我对 HTML、CSS 等知之甚少。基本上，我和我的朋友有一个网站 ( https://www.mitologia.pt/ )，我们正在使用 Adsense。在页面底部，我们想添加一个匹配广告和一个展示广告，但现在一个接一个（看起来很糟糕）。相反，我们想这样做：

是否有可能做到这一点？如果是这样，怎么做？这是我目前的解决方案，它适用于超过 500 像素，但在它下面根本不起作用......

    <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>

标签： htmlcssadsense

解决方案

好的，这就是你的内联样式 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>

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

推荐阅读