css - Div 在小屏幕上重叠

Question

由于我不善于解释，所以我画了几张图。我目前有以下代码

<header style="height: 280px;">
<div id="topmenu" style="height: 70px; width: auto; margin-top: 217px;">
<ul><li>home</li><li>page</li><li>contact</li><li>more</li><li>more</li></ul>
advert
</div>
</header>
<div id="leftnav" style="float: left; width:200px;">
<center>menu here</center>
</div>
<div id="rightnav" style="float: right; width:200px;">
menu here
</div>
<div id="content" style="margin-left: 276px; margin-right: 260px;">
content
</div>

看起来像这样:

但在移动设备或较小的屏幕上，或者当我添加更多菜单项时，广告被推出，因为它没有足够的空间并与内容 div 重叠，它看起来像这样:

但我想让它做的是将内容 div 向下推，这样它就不会重叠，如下所示:

如何修改我的 html/css 以在较小的屏幕上正确显示广告？最小宽度不是一个选项。

Answer 1

如果假设您使用的是不同的代理，例如手机或平板电脑，那么您的情况就会有所不同。您会发现大多数网站(如 orkut、facebook、gmail 等)都有移动版网站和触摸版网站。这些网站是根据用户屏幕制作的。同样，您必须编写网站代码以适合用户代理。

阅读此 link还有这个link .现在你必须为移动和其他此类代理制作一个单独的页面。并将用户重定向到移动版网站。

对于不同的计算机屏幕尺寸，您可以使用 % 或 em 形式的宽度和高度。那行得通。屏幕尺寸是动态的，% 或 em 提供基于动态屏幕尺寸映射您的对象。

试试吧，希望能奏效。

代替

#main:
{
     width:270px;
     height:300px;
}

使用这个:

#main:
{
     width:40%;
     height:60%
}

你会找到更好的解释here .

了解 cross browser compatibility .这个也不错link for cross browser compatibility .