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

您必须使用媒体查询来调整图像的高度，在您的情况下我猜测图像是：

<img src="gamereviewresized.png">

这是一个简单的示例，您可以使用媒体查询调整img的高度：

<img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="">

CSS ::

img{
    max-width:400px;
    height: auto;
}

@media only screen and (max-width : 480px) {
           img{
            max-width:200px;
            height: auto;
        }
    }

小提琴here.，将显示部分的宽度缩小到480px以下，看看我的意思。

您可以学习更多媒体查询here。

Answer 2

您的#site div的固定宽度为1075px，左右边距为auto。

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

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

因此，任何小于1275px的屏幕宽度（屏幕左边缘与#site左边缘之间的边距都比100px窄）将导致游戏评论标签重叠#site。

建议：

1）给#site左手边距比100px宽游戏评论标签更宽（和右手边距匹配）

2）对于#site，将width: 1075px;声明更改为max-width: 1075px;（当屏幕比{{1}更窄时，这将使#site的宽度缩小}）。

示例：

1275px

防止div重叠

2 个答案: