Flexbox 导致 adsense 错误:“adsbygoogle.push() error: No slot size for availableWidth=0”

Jus*_*tin 6 javascript css adsense flexbox angular-material

我有一个使用 angular-material 和 flexbox 进行布局的网站。我试图在这些 flexbox 容器之一中包含一个 Google Adsense 代码段,但它给了我错误:“adsbygoogle.push() 错误:没有可用宽度 = 0 的插槽大小”。但是,如果我将相同的代码段放在 flexbox 容器之外,它会正常运行。

这并不理想,因为我的整个网站都是用 flexbox 制作的。所以我想找到一种方法来在 flexbox 容器中完成这项工作。

这是我的代码片段:

    <div layout="column" layout-align="center center" layout-padding="" flex="flex" class="scroller container">
      <div flex="" hide-xs="" show-gt-xs="">
        <h1>My Account</h1>
      </div>
      <welcome></welcome>
      <script async="" defer="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- responsive ad-->
      <ins flex="grow" style="width:100%;min-width:100px;height:100px;" data-ad-client="ca-pub-IDISHEREONMYSITE" data-ad-slot="IDISHEREONMYSITE" data-ad-format="auto" class="adsbygoogle"></ins>
      <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            (adsbygoogle = window.adsbygoogle || []).push({})
        });
      </script>
    </div>
Run Code Online (Sandbox Code Playgroud)

我还尝试将谷歌广告中对 flex 的所有引用替换为仅 display:block; 我尝试使用宽度、无宽度、最小宽度、最大宽度,所有这些都一起使用。我试过把它放在一个 div 中,这个 div 是一个 flexbox 列,我试过把它放在一个 div 中,即 display:block; 具有固定宽度等

它似乎都不起作用。

有任何想法吗?

有没有办法向谷歌报告这个(可能的)错误?

Fri*_*x33 0

您需要以px而不是%定义宽度

尝试看看这里它可能会对您有所帮助。