Adsense 广告导致侧边栏在 flex 布局中离开屏幕 [英] Adsense ads causing sidebar to go off the screen in a flex layout

问题描述

我正在使用 flexbox 开发一个网站.该网站在没有 google adsense 广告的情况下看起来很完美.当我在网站中插入 AdSense 广告导致右侧边栏离开屏幕时，就会出现问题.

每个页面上有四个广告，分别位于页眉、页脚、右侧边栏和信息流.如果我删除信息流广告并保留所有其他广告而不是布局显示正常，但是当我插入信息流广告时会出现问题.它导致右侧边栏的一半离开屏幕.

.site-content {显示:弹性；弹性方向:行；填充:0 32px；}.left-sidebar {弹性:0 0 200px；最大宽度:200px；}.右侧边栏{弹性:0 0 320px；最大宽度:320px；}.main-section {弹性:1 1 自动；边距:0 32px；}.infeed-桌面广告{显示:块；}.article-wrapper {显示:弹性；弹性方向:行；}.文章 {弹性:0 0 50%；最大宽度:50%；}

<aside class="left-sidebar"></一边><main class="main-section"><div class="article-wrapper"><div class="文章"></div><div class="文章"></div>
<div class="textwidget">ADSENSE 输入广告代码

</节></main><aside class="右侧边栏"><div class="widget-area"><部分><div class="widget">ADSENSE 响应式广告代码

</节>

</一边>

我检查了 .main-section 没有 infeed 广告的宽度大约是 1130px，但是插入了 infeed 广告它大约是 1200px.问题是信息流广告应该继承 1130 像素的宽度，但它使用的是 1200 像素.我无法在 Adsense 广告上指定固定宽度，因为该网站使用的是流体布局.

解决方案

我刚刚解决了这个确切的问题，想出了一个解决方案，所以我想我应该分享它.只需移动:

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

就在上面:

.

I'm developing a website using the flexbox. The website appears perfect without google adsense ads. The problem arises when I'm inserting the adsense ads in the website which is causing the right sidebar to go off the screen.

There are four ads on each page, at the header, footer, right sidebar and infeed. If I remove the infeed ad and keep all the other ads than the layout is displayed ok, but the problem arises when I'm inserting the infeed ad. It is causing half of the right sidebar to go off the screen.

.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>

I checked the width of .main-section without infeed ad it is around 1130px, but with infeed ad inserted it is around 1200px. The problem is infeed ad should have inherited the width of 1130px but it is using 1200px. I can't specify a fixed width on the adsense ads as the website is using a fluid layout.

解决方案

I have just been tackling this exact problem, figured out a fix so thought I should share it. Simply move:

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

just above:

</body>.

这篇关于Adsense 广告导致侧边栏在 flex 布局中离开屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！