Question

请原谅我，如果我的问题很愚蠢，但我不是网络程序员，而且我花了2个多小时试图解决这个问题。

所以，我在我的网站上使用Weebly，并且有一个“内容”区域，我可以放置元素。然后在“内容”区域的右侧和左侧，我想放置广告。

我已经想出如何使用绝对定位来做到这一点，并且它在计算机的浏览器上看起来很好，但在移动设备上（无论使用的是用户代理），谷歌的adsense广告覆盖了我的内容区域。

这就是我想要的样子：

~~http://testing.jakaar.net/~~ （此网站已不复存在。

编辑： http://android.jakaar.net/index.html（这是我的网站，现在可以使用，请参阅下面的问题解答）。

~~但是，这不适用于手机。广告仍然显示，它们只是叠加。~~
编辑：现在可以使用，请参阅下面的答案。

我尝试在我的css中使用position：relative来左右定位广告，但是它们在我的内容区域之上或之下，所以它会向上或向下推动所有内容。

以下是我认为相关的CSS：

body {
    background: url(bodybg.jpg) top repeat-x;
    background-color:#efefef;
    font-family: arial, sans-serif;
    font-size:12px;
    color:#666666;
    margin:0;
    padding:0;
}

#content{
    margin-left:auto;
    margin-right:auto;
    width: 898px;
    background: #fff;
    min-height: 500px;
    _height: 500px;
    padding: 32px;
}

然后是HTML：

<head>
<title>{title}</title>
<style type="text/css">
.right
{
position:absolute;
right:0px;
padding-right:80px;
padding-left:80px;
margin-top:180px;
}
.left
{


   position:absolute;
    left:0px;
    padding-right:80px;
    padding-left:80px;
    margin-top:180px;
    }
    </style>


        <div id="wrapper">
            <div id="header">
                <div id="headerleft">{logo max-height="60"}</div>
                <div id="navigation">{menu}</div>
             </div>

            <div class="right">
    //adsense add that goes on the right
    </div>
    <div class="left">
    //adsense add that goes on the left
    </div>
<div id="content">
        {content}
        </div>

        <div id="footer">{footer}</div>
    </div>

我也尝试过使用float:left和float:right，但它的行为与绝对定位相同。

非常感谢任何帮助。

Answer 1

我创建了一个3列布局，并将我的广告放在第1列和第3列，然后在第2列放置了“内容”。我使用http://webdesign.about.com/od/csstutorials/ss/css_layout_sbs_9.htm作为教程。

~~我还将position:fixed用于我的广告，以便他们滚动页面。~~
这导致格式问题，我现在不想修复，所以我删除了固定的定位。

结果在这里：http://android.jakaar.net/index.html

以下是相关的CSS：

#wrapper {
    width: 1402px;
    margin: 0 0 0 20px; 
    padding: 0;
}
#wrapper #topad
{
margin-top:20px;
margin-bottom:20px;
}
#wrapper #col1 
{ 
width: 190px;
float: left; 
margin-top: 230px;
} 
#col1 #leftad
{
float:right;
position:fixed;
width:160px;
}
#wrapper #col2outer 
{
width: 1202px;
float: right; 
margin: 0; 
padding: 0; 
} 
#col2outer #col2mid 
{ 
width: 962px; 
float: left;
} 
#col2outer #col2side 
{ 
margin-top: 230px;
width: 190px;
float: right; 
}
#col2side #rightad
{
position:fixed;
width:160px;
}

相关的HTML：

<body>
<center><!--I used this to enclose the entire body because otherwise everything was off-center, of course-->
    <div id="wrapper">
        <div id="col1">
        <div id="leftad">
        <!--google adsense ad code-->
        </div>
        </div>

        <div id="col2outer">
        <div id="col2mid">
        <div id="header">
            <div id="headerleft">{logo max-height="60"}</div>
            <div id="navigation">{menu}</div>
            </div>
            <div id="topad">
            <!--google adsense ad code-->
        </div>

        <div id="content">
          {content}
          </div>
          </div><!--this is the close of "col2mid"-->

          <div id="col2side"> 
          <!--google adsense ad code-->
          </div>

          </div><!--this is the close of "col2outer"-->



        <div id="footer">{footer}
        </div>

    </div><!--this is the close of "wrapper"-->

    </center>
</body>

Answer 2

您可以尝试将内容元素的margin-left和margin-right设置为广告左侧和右侧所需的尺寸（应为240px = .left padding-left + left ad width ）。您必须调整内容宽度属性才能适应。

如果您没有将其设置为全屏，则可以在普通浏览器中弄乱您的网站。

请参阅here，了解Box模型的精彩图片。

Answer 3

您也可以使用负边距将其向左或向右移动（-80px），根据我的示例应用一些宽度： http://jsfiddle.net/q7Cf7/

CSS / HTML定位 - 元素叠加内容

3 个答案: