我试图在顶部放置一个 970x90 的水平广告,在右侧放置 2 个 160x600 的广告,一个在另一个下面。
这是我的页面在没有广告的情况下的样子。
这是我的没有广告的 HTML
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-1 text-center">
<!-- DJ 1 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 2 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 3 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 4 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 5 -->
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1 text-center">
<!-- DJ 6 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 7 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 8 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 9 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 10 -->
</div>
</div>
...
</div>
这是我的包含广告的 HTML
<div class="container">
<div align="center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- edm-top -->
<ins class="adsbygoogle"
style="display:inline-block;width:970px;height:90px"
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="XXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1 text-center">
<!-- DJ 1 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 2 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 3 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 4 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 5 -->
</div>
</div>
<div class="edm-sides" align="right">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- edm-sides -->
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="XXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="edm-sides" align="right">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- edm-sides -->
<ins class="adsbygoogle"
style="display:inline-block;width:160px;height:600px"
data-ad-client="ca-pub-XXXXXXXXXXXX"
data-ad-slot="XXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1 text-center">
<!-- DJ 6 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 7 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 8 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 9 -->
</div>
<div class="col-md-2 text-center">
<!-- DJ 10 -->
</div>
</div>
...
</div>
CSS
.edm-sides {
padding-right:0px;
}
页面是这样的
CSS 似乎对 div 中的谷歌广告没有影响。这里有什么问题吗?
另外,在不保留第一行和第二行之间的空间的情况下,将 DJ 列一个接一个地放在另一个下面的最简单方法是什么?
最佳答案
要实现您想要做的事情,您需要改变一些事情, - 创建一个包含 DJs class="col-md-9"的主容器 - 创建一个侧边栏来放置您的广告 class="col-md-3"
然后在主容器内创建一个 div.col-md-12 或 div.row 以便它占据所有宽度,这将作为一行,在其中您可以放置 DJ 1 到 5,并且每个新的你想要的行你可以用这种方式创建它。
您需要调整 fiddle 中容器的大小才能看到它
<div class="container">
<div class="row text-center">
ad
</div>
<div class="col-md-9 col-sm-9">
<!-- DJ info -->
<div class="col-md-12">
<div class="col-md-2 col-sm-2 col-md-offset-1 text-center">
DJ 1 -->
</div>
<div class="col-md-2 col-sm-2 text-center">
DJ 2 -->
</div>
<div class="col-md-2 col-sm-2 text-center">
DJ 3 -->
</div>
<div class="col-md-2 col-sm-2 text-center">
DJ 4 -->
</div>
<div class="col-md-2 col-sm-2 text-center">
DJ 5 -->
</div>
</div>
<div class="col-md-12">
<div class="col-md-2 col-sm-2 col-md-offset-1 text-center">
DJ 6 -->
</div>
<div class="col-md-2 col-sm-2 text-center">
DJ 7 -->
</div>
<div class="col-md-2 col-sm-2 text-center">
DJ 8 -->
</div>
<div class="col-md-2 col-sm-2 text-center">
DJ 9 -->
</div>
<div class="col-md-2 col-sm-2 text-center">
DJ 10 -->
</div>
</div>
<!-- DJ info end-->
</div>
<!-- ADS side bar -->
<div class="col-md-3 col-sm-3 text-center">
<div>
ad1
</div>
<div>
ad2
</div>
<!-- ADS side bar end -->
</div>
</div>
关于html - CSS 不适用于放置在 div 中的 Google 广告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21557035/