Question

我正在使用自适应广告。默认情况下，文字广告很好地左对齐，但由于某种原因，图片广告的左边距非常宽。我无法摆脱它，即使我采用最简单的页面，即只有一个广告的页面：

<!DOCTYPE html>
<html>
<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
<!-- Responsive Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xxx"
     data-ad-slot="xxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</body>
</html>

文字广告左对齐，例如：

但图片广告包含一些较宽的左边距，例如：

我的问题是如何确保图片广告左对齐？

Answer 1

试试这个 - 把你的adsense代码放在div中，并像这样设置div：

<div style="margin: 5px !important; float: left !important;"> 
    --Put your AdSense ad code here --
</div>

Answer 2

我看过你的网页了。我已经应用了以下风格

在您的文件中尝试以下css

.container {
padding-left:0px;
margin-left:10px;
}

让我知道它是否有用

Answer 3

也许您可以尝试使用chrome开发人员工具识别adsense创建的DOM元素（或尝试使用ins标记中的类），并在代码中添加一些javascript来调整adsense，例如你可以做：

document.getElementsByClassName('adsbygoogle').style.cssFloat = "left";

如果您更喜欢jquery，可以执行类似

的操作

$('.adsbygoogle').css('float','left');

Answer 4

要限制广告的尺寸和对齐方式，需要将其放在容器元素中，例如段落或div。将一个类分配给容器元素，在响应广告的容器上设置最大宽度限制，然后左对齐内容，全部在您的CSS中。

Answer 5

创建一个包含一行和两列（或具有display:table;适当性的div）的表。将您的代码放在第一个单元格中。我认为只有大块中的单个广告才会居中。这个例子向您展示了我如何看待这个：

<table width="100%" height="90" border="0" align="center">
    <tbody>
    <tr>
        <td>
            <ins class="adsbygoogle"
            style="min-width:400px;max-width:970px;width:100%;height:90px;left:0;margin-left:0;"
            data-ad-client="xxx"
            data-ad-slot="xxx"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        <td>
        <td>
        </td>
        </tr>
    </tbody>
</table>

Answer 6

如果您正在查找第一张图片中第二张图片中显示的结果，我只能想到以下解决方案：

    <!DOCTYPE html>
    <html>
       <head>
         <script async       src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
       </head>
       <body>
   <!-- Responsive Ad -->
          <div class = "adClass" style = "float:left;">
             <div id="ad" style="width: 100%; max-width: 600px; text-align: left;">
             <ins class="adsbygoogle"
               style="display:block"
               data-ad-client="xxx"
               data-ad-slot="xxx"
               data-ad-format="auto"></ins>
             </div>
           </div>
           <div class="yourContent" style = "float:right">
           <span>Your content here.</span>
           </div> 
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
         </body>
       </html>

Answer 7

这似乎对我有用，您怎么看？

style="display:inline-block;max-width:728px;width:100%

必须在任何类型的编码中添加一些新手，所以如果我错了，请纠正我。

Answer 8

唯一对我有用的是：

<div class="admaxwidth">
    [your responsive ad code]
</div>

和你的.css：

.admaxwidth {max-width:728px;}

Answer 9

如果您使用的是wordpress，则可以执行以下操作：

<div class="alignleft">
<! --- put your adsense code here -->
</div>

为我工作

Answer 10

我验证了这两种解决方案都有效：

添加到您的AdSense代码style="display:inline-block"

<ins class="adsbygoogle"
    data-ad-client="XXX"
    data-ad-slot="XXX"
    style="display:inline-block"
    data-ad-format="horizontal">
</ins>

使用包含display:inline-block

的CSS类围绕您的AdSense代码

.adTop {min-width:320px;min-height:50px;display:inline-block;}
@media(min-width:768px) {
    .adTop {min-width:728px;max-width:970px;min-height:90px;}
}

<div class="adTop">
    <ins class="adsbygoogle adTop"
        data-ad-client="XXX"
        data-ad-slot="XXX"
        data-ad-format="horizontal">
    </ins>
</div>

如何保持对齐响应的adsense图片广告？

10 个答案: