Google Image Ad超出了父级div

Question

我的侧边栏中的Google广告扩展到了父div之外，并与其他内容重叠。

以下是我遇到的问题的屏幕截图：

Google Adwords代码定义在包含在“侧边栏”ID中的内容中：

<div id="sidebar">
    <div>
        <h3>Categorías</h3>
        [categories defined here]
    </div>
    <div>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        [rest of google adwords code here]
    </div>
</div>

这是相关的css：

#sidebar {
    float:right;
    width:30%;
    padding:10px;
    height:100%;
}

我尝试在'overflow:hidden' div中添加#sidebar，但它也不起作用，谷歌广告被裁剪但我希望它适合侧边栏。

我需要更改什么才能让广告适合其父级div？

Answer 1

如果没有看到将元素放在侧边栏中的css，我的猜测是您的广告位置设置为浮动，因为它未包含在侧边栏div中。

在这种情况下，您需要实施Clearfix：

<强> 1。在CSS中创建clearfix类：

添加以下CSS（注意：这适用于IE8及更高版本。如果您需要支持旧浏览器，请查看上面的链接。）

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

<强> 2。将clearfix应用于HTML：

将clearfix类添加到包含广告的div：

<div id="sidebar">
    [...]
    <div class="clearfix">
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        [rest of google adwords code here]
    </div>
</div>

注意：

它可能不是浮动的div，在这种情况下，您需要使用元素检查器检查元素。您无法将类添加到属于Google广告的元素中，因此您可以更改CSS规则以使用浮动元素的类名或ID。

参考：

Clearfix：https://css-tricks.com/snippets/css/clear-fix/