我正在使用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/