如何在右侧和左侧显示广告？

Question

我们希望将adsense ad 780x90和自定义图片广告400x90放在同一行中，即。一个在右边，一个在左边。

我的css

.topadleft{
    float:left; 
}
.topadright{
    float:right;
}
.topadwrap{
    padding-top:10px; padding-bottom:10px;
    background-color:#f0f0f0;

}

我的HTML

<div class="topadwrap">
<div class="topadleft">
    <ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-######"
 data-ad-slot="9425714545"
 data-ad-format="auto"></ins>
</div>
<div class="topadright">
 <a href="#" target="_blank" border="0"><img src="images/ad.jpg"></a>

Answer 1

您可.custom-dashed-border { -fx-border-color: blue ; -fx-border-width: 5 ; -fx-border-style: segments(10, 15, 15, 15) line-cap round ; } 同时展示float个广告，只需将left类添加到较小的广告中即可调整它们之间的空间。

另外，请确保关闭.right个元素（div已打开），如果您没有给容器增加高度，则应添加{{1}它可以清除广告。

我在下方制作了一个示例 - 但用图片替换了您的Google广告。

＆＃13;

＆＃13;

.topadright

＆＃13;

.clearfix

＆＃13;

＆＃13;

＆＃13;

希望能解决您的问题。

编辑：

响应式AdSense要求您向父元素添加宽度/高度 - 不接受.topad{ float:left; } .right{ margin-left: 10px; } .topadwrap{ padding:10px; background-color:#f0f0f0; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } ...因此您需要指定包含div的<div class="topadwrap clearfix"> <div class="topad left"> <img src="http://placehold.it/780x90 "> </div> <div class="topad right"> <a href="#" target="_blank" border="0"><img src="http://placehold.it/400x90"></a> </div>和width: auto; 。然后，使用媒体查询修改为不同浏览器/设备大小投放到父容器中的广告的大小。

AdSense Reference

我查看了您的网址，并根据您的网站模拟了quick pen一些响应式查询，向您展示了如何调整广告的宽度和高度。

希望这个修复程序对你有用！

＆＃13;

＆＃13;

width

＆＃13;

height

＆＃13;

＆＃13;

＆＃13;

Answer 2

为两者设置float: left

<div class="topadwrap">
  <div class="topadleft"> 
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-######" data-ad-slot="9425714545" data-ad-format="auto">
    </ins>
    <img src="http://placehold.it/700x100" />
  </div>
  <div class="topadright"> <a href="#" target="_blank" border="0"><img src="http://placehold.it/200x100" /></a>
  </div>
</div>

<强> CSS

.topadleft {
  float: left;
  width: auto;
}

.topadright {
  float: left;
  padding-left: 2%;
  width: auto;
}

.topadwrap {
  padding-top:10px;
  padding-bottom:10px;
}

Jsfiddle