Question

我正在尝试为我的网站移动版实施320x50移动广告。我希望广告跨越移动设备的整个width。然而，广告显示的很小，而不是我的iphone的整个width，它会随着内容滚动显示。

我在网页中使用此代码来调用移动设备css

 <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile2.css" />

然后在css我试过

div#mobilead {
  width:100%;
}

我需要广告显示在屏幕底部，即使在滚动时也能保持原位。任何想法都将不胜感激，谢谢！

以下是请求的完整代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
 <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile2.css" />

</head>

<body>


 <div id="mobileB">  
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- TWF_mobile_banner_adsense -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:50px"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="6479374699"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>


</body>
</html>

然后是css

#mobileB {
    position: absolute; 
bottom:0;
left:0;
z-index: 99; 
width:100%; 
height:50px
}
}

Answer 1

您确定要将此CSS作为最优先的CSS吗？广告现在有多大？

如果您确定它始终保持相同的高度，我会首先在div中添加静态高度。

Answer 2

你能否分享你的html结构？这是必需的，因为它取决于你的div结构，在CSS中有一个叫做属性继承的东西，所以当你处理定位时，实际上不仅要知道特定对象的属性，还要知道它的父对象。

现在从我看到的，我看不出有什么理由不应该滚动内容。我不是专业人士，但我认为你最好的机会是使用固定定位。根据您希望广告的展示位置，您必须设置特定的坐标。例如，如果您希望它在右上角显示为一种“粘性”div，那么您可以这样做：

position: fixed; 
top: 0px; 
right: 0px; 
z-index: 99; 
width:100%; 
height:50px;

对不起，我没有看到你提到你需要它位于底部。在这种情况下，你可以这样做：

position: fixed; 
bottom:0;
left:0;
z-index: 99; 
width:100%; 
height:50px

无论如何，无论你决定什么以及你需要什么，你都应该通过玩top / bottom / left / right，position：fixed和z-index来实现。祝你好运！

需要在屏幕底部保留移动广告单元

2 个答案: