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中的Google广告没有影响。这有什么不对？

另外，在第一排和第二排之间没有留下空间的情况下，将DJ列放在另一列之下的最简单方法是什么？

Answer 1

要实现你想要做的事情，你需要改变一些事情， - 创建一个主容器，它将具有DJ类=＆＃34; col-md-9＆＃34; - 创建一个侧边栏以展示您的广告类=＆＃34; col-md-3＆＃34;

然后在主容器内创建一个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>