我正在使用flexbox开发一个网站。没有google adsense广告的网站看起来很完美。当我在网站中插入adsense广告时,就会出现问题,这会导致右侧边栏不显示在屏幕上。

每页上有四个广告,分别位于页眉,页脚,右侧栏和供稿。如果我删除供稿广告并保留除布局以外的所有其他广告,则可以正常显示,但是当我插入供稿广告时会出现问题。这导致右侧边栏的一半离开屏幕。



.site-content {
  display: flex;
  flex-direction: row;
  padding: 0 32px;
}

.left-sidebar {
  flex: 0 0 200px;
  max-width: 200px;
}

.right-sidebar {
  flex: 0 0 320px;
  max-width: 320px;
}

.main-section {
  flex: 1 1 auto;
  margin: 0 32px;
}

.infeed-desktop-ad {
  display: block;
}

.article-wrapper {
  display: flex;
  flex-direction: row;
}

.article {
  flex: 0 0 50%;
  max-width: 50%;
}

<div class="site-content">
  <aside class="left-sidebar"> </aside>
  <main class="main-section">
    <div class="article-wrapper">
      <div class="article"></div>
      <div class="article"></div>
    </div>
    <section class="infeed-desktop-ad">
      <div class="textwidget">
        ADSENSE INFEED AD CODE
      </div>
    </section>
  </main>
  <aside class="right-sidebar">
    <div class="widget-area">
      <section>
        <div class="widget">
          ADSENSE Repsonseive AD CODE
        </div>
      </section>
    </div>
  </aside>
</div>





我检查了没有插入广告的.main-section宽度,该宽度大约为1130px,但是插入了插入广告的宽度大约为1200px。问题是供稿广告应该继承了1130px的宽度,但它使用的是1200px。我无法在adsense广告上指定固定宽度,因为网站使用的是流畅的布局。

最佳答案

我一直在解决这个确切的问题,想出一个解决办法,以为我应该分享。只需移动:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

就在上方:

</body>

关于html - Adsense广告导致侧边栏在Flex布局中不显示在屏幕上,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49833047/

10-11 23:26
查看更多