问题描述
我希望您能为我提供帮助,因为我对HTML,CSS等了解甚少。本质上,我和我的朋友们都有一个网站(https://www.mitologia.pt/),并且我们正在使用Adsense。在页面底部,我们要添加一个匹配广告和一个展示广告,但是目前一个在另一个之后(看起来很糟糕)。相反,我们想这样做:
- 如果窗口宽度小于500像素,则只能看到匹配的广告;
- 如果窗口宽度超过500像素,则无论窗口大小如何,我们都希望在右侧展示300x250展示广告,然后将所有剩余空间用于匹配广告(在左侧)。
是否可以这样做?如果是这样,怎么办?这是我当前的解决方案,在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>
解决方法
好的,这就是您的内联样式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>
问题是我在您的网站上看不到任何广告,所以我无法准确地想象问题
,借助@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>