html - 最大宽度不适用于为 Google Adsense 广告创建的 div

Question

我正在尝试在另一个 div 中为 Google Adsense 设置一个 div。代码如下，

<div id="content">
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<div id="banner">
<!--google adsense code here-->
</div>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
</div>

CSS 是

#content {
max-width: 40em;
}

#banner {
max-width:50%;
float:left;
}

当我运行这段代码时，我根本看不到 adsense 广告。第 5 段的开头有轻微的缩进。看起来广告隐藏在某处。当我检查浏览器中的控制台选项卡(检查元素)时，我看到了这个错误，

TagError: adsbygoogle.push() error: No slot size for availableWidth=0

但是，如果我将 max-width 替换为 width for banner as

#banner {
width:50%;
float:left;
}

广告转换。但是，广告右侧的段落和广告本身没有正确响应，尤其是当我在加载页面后重新调整浏览器大小时。我想使用 max-width 属性。我错过了什么？

质量保证 css max-width not working inside another div对我帮助不大。

Answer 1

此问题是由于在插入广告之前将自适应广告放置在没有初始宽度的 float 框中造成的。

Adsense 的响应式代码适用于您希望根据父元素调整广告尺寸的情况，而非相反。如果您想选择特定的广告尺寸，并根据该广告调整父 block 的尺寸，则需要使用非响应式代码(或使用响应式代码的变体，您可以在其中使用媒体查询指定宽度和高度).

当页面加载时，Adsense 广告还不存在，它只是一个空的占位符 <ins>元素。 Adsense 响应代码会检查该占位符的父元素的宽度，并使用该宽度来确定要插入的广告。

问题是，虽然大多数 div 默认填充其父元素的整个宽度，即使它们为空时也是如此，但 float 不会。空 float 的宽度为零。因此，当加载 Adsense 响应式代码时，它无法确定应使用何种尺寸的广告，因为它所在的父元素的宽度为零。

您需要为 float 元素指定一些特定的宽度，例如 width: 50% ，或者您需要使用非响应式广告代码或使用响应式广告代码的变体来指定 Adsense 广告的尺寸，您可以在其中使用媒体查询指定广告尺寸。