Question

我有一个网站，它使用角度材料和flexbox的布局。我尝试在其中一个Flexbox容器中加入Google Adsense代码段，但它给了我错误：＆＃34; adsbygoogle.push（）错误：availableWidth = 0＆＃34;没有插槽大小。但是，如果我将相同的代码段放在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>

我还试图将google广告中对flex的所有引用替换为仅显示：block;我尝试过使用宽度，宽度，最小宽度，最大宽度，所有这些都在一起。我已经尝试将它包装在一个Flexbox列的div中，我已经尝试将它放在一个显示为div的div中：block;固定宽度等

似乎没有任何效果。

有什么想法吗？

有没有办法向Google报告这个（可能的）错误？

Answer 1

您需要在 px 中定义宽度，而不是％。

试着看here它可能会让你感到沮丧。

Answer 2

我刚刚遇到这个问题，并寻求帮助。

仅查找有关设置固定宽度的信息（在PX中？）。

我知道这不正确，我目前有一个宽度为90％的盒子并且工作正常。

令我恼火的一件事是在更大的显示器上谷歌广告永远不会居中。

我尝试将其转换为弹性框以对齐内容以及我的问题开始的位置。

我通过设置setTimeOut和addclass来修复此问题。

    function centerAd() {
     $( "#adBlock" ).addClass( "adBlock" );
    }

    var timeoutID;
$(function() {
     timeoutID = window.setTimeout(centerAd, 1000);
})

与班级：

.adBlock {display: flex; justify-content:center; align-items:center; align-content:center} /* We call this after page has loaded to center ad */

它为谷歌广告提供了足够的时间来嗅探元素的宽度，然后很好地将其中心化。通常是无缝的。

Answer 3

Adsense的响应代码根据放置它的父元素的宽度确定它插入的iframe的宽度。通常这很好用，因为即使父元素还没有内容，它仍然有宽度，因为它填充了可用的宽度。

但是，如果您的父元素位于flexbox行中，该行根据其内容确定其成员的宽度，则在添加内容之前，此宽度将为零。因此除了Adsense代码之外，除了Adsense代码之外没有任何其他内容，在Adsense计算可用宽度时，它为零。

你需要通过将框设置为具有除auto之外的flex基础，或者将宽度或最小宽度属性应用于框来解决这个问题，以便在Adsense运行其代码之前的初始状态，它＆＃39; ll的宽度非零。

因此，在特定的flex成员上，设置除auto之外的flex基础（例如百分比或px）

flex: 1 0 30%

或设置宽度或最小宽度

min-width: 30%

当唯一的内容是Adsense广告时，您无法使用基于内容确定宽度的展示基础，因为之后JavaScript会插入广告。

Flexbox导致adsense错误：＆＃34; adsbygoogle.push（）错误：availableWidth = 0＆＃34;

3 个答案: