CSS 不适用于放置在 div 中的 Google 广告

Question

我正在尝试在顶部放置一个 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 列放在另一个下方而不在第一行和第二行之间留出空间？

Answer 1

要实现你想要做的事情，你需要改变一些事情， - 创建一个包含 DJ class="col-md-9" 的主容器 - 创建一个侧边栏来放置您的广告 class="col-md-3"

然后在主容器中创建一个 div.col-md-12 或 div.row 使其占据所有宽度，这将作为一行，在其中您可以放置​​ DJ 1 到 5，并且每个新的你想要的行可以这样创建。

您需要在小提琴中调整容器的大小才能看到它

DEMO

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