html - 防止div重叠

Question

我遇到了 div 重叠的问题，我认为这与不同的屏幕分辨率有关。

这是我的 CSS:

#menu {
 background: #fff;
 width: 790px;
}

#site {
 border-radius:15px 15px 15px 15px;
 background: #fff;
 width: 1075px;
 margin-left: auto;
 margin-right: auto;
 box-shadow: 0px 0px 15px 0px #000;
 padding: 2px;
 -moz-box-shadow: 0 0 15px 0px #000;
 -webkit-box-shadow: 0 0 15px 0px #000;
}

#social {
 border-radius:15px 15px 15px 15px;
 background: #fff;
 width: 100px;
 box-shadow: 0px 0px 5px 2px #000;
 padding: 5px;
 float:left;
 position:fixed;
 -moz-box-shadow: 0 0 15px 0px #000;
 -webkit-box-shadow: 0 0 15px 0px #000;
}

#categories {
 border-radius:15px 15px 15px 15px;
 background: #fff;
 width: 100px;
 box-shadow: 0px 0px 5px 2px #000;
 padding: 5px;
 float:left;
 position:fixed;
 top: 250px;
 -moz-box-shadow: 0 0 15px 0px #000;
 -webkit-box-shadow: 0 0 15px 0px #000;
}

#categories img {
 border-radius: 15px 15px 15px 15px;
}

这是我的 HTML:

<div align="center">
<div id="social">
<h3 style="font-size:18px">Follow Us!</h3>
<a href="#">
<img src="logo.png" />
</a>
<a href="#">
<img src="logo2.png">
</a>
</div>

<div id="categories">
<h3 style="font-size:18px">Categories!</h3>
<a href="categories.php">
<img src="gamereviewresized.png">
</a>
</div>

当我访问我的网站时，它看起来像这样:http://prntscr.com/6v5qaj对于屏幕分辨率不同的人来说，它看起来像这样:http://prntscr.com/6v5qp3

有关如何防止不同分辨率重叠的帮助将不胜感激。

谢谢!

Answer 1

您的 #site div 具有 1075px 固定宽度和 auto 左右边距。

#site {
 width: 1075px;
 margin-left: auto;
 margin-right: auto;
}

与此同时，游戏评论 标签的宽度固定为 100px。

因此，任何小于 1275px 的屏幕宽度(屏幕左边缘与 #site 左边缘之间的边距小于 100px) 将导致 Game Reviews 选项卡与 #site 重叠。

建议:

1) 给 #site 一个比 100px 宽的 Game Reviews 标签的左边距(和右边距匹配)

2) 对于 #site，将 width: 1075px; 声明更改为 max-width: 1075px;(这将启用宽度#site 在屏幕小于 1275px 时缩小。

示例:

#site {
 max-width: 1075px;
 margin-left: 120px;
 margin-right: 120px;
}