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以在较小的屏幕上正确显示广告？ min-width不是一个选项。

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。