Question

当我制作网站时，它适合我的屏幕，但是当我在另一个屏幕上打开网站时，它无法正常工作（div与彼此重叠）。当我调整窗口大小时，它是一样的。我看了几篇关于这个的帖子，但仍然没有好的答案。我试着制作一个容器来把它们全部放进去。但它仍然是一样的。

任何答案，为什么会这样？

容器CSS代码：

#container
{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

我把它放到这样的HTML中：

<div id="container">
Content goes here
</div>

编辑：伙计们，我认为你不理解我。当我在另一个屏幕分辨率时，所有div移动。如果我没有完全错的话，我认为一切都会动起来。我想知道这样做的真正方式。你做什么的？

http://i49.tinypic.com/8wwo6r.jpg

http://i48.tinypic.com/359ydc9.jpg

最终编辑：我用百分比修正了它。它似乎工作得很好！谢谢你的所有答案！我知道这会给我一种不好的声誉，因为我没有说清楚自己。

Answer 1

您可以使用百分比而不是像素。

#container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

您可以使用此论坛来确定具有屏幕分辨率和所需大小的百分比：

WidthPercentage = ContainerWidth / ScreenWidth * 100

因此，对于您的示例，如果您的屏幕分辨率为1360x768：

WidthPercentage = 960 / 1360 * 100 = 70.5%

这称为responsive design。

您可以找到一些指南here和一些好文章here。

Answer 2

如果您不想使用百分比，则可以使用自适应设计和媒体查询。基本上，您可以根据不同的浏览器属性调用不同的CSS规则（例如：width）。查看关于此here的精彩教程（您也可以看到它的实际效果）。

引用：

响应式设计的第二部分是CSS3媒体查询，目前在许多现代浏览器中都获得了不错的支持。如果您不熟悉CSS3媒体查询，它们基本上允许您收集有关网站访问者的数据并使用它来有条件地应用CSS样式。出于我们的目的，我们主要关注最小宽度媒体功能，如果浏览器窗口低于我们可以指定的特定宽度，我们可以应用特定的CSS样式

Answer 3

您已将<div>（<div id="container">）设置为960像素宽。如果您在浏览器窗口中查看宽度小于960像素的页面，则<div>将不适合它。

你的问题不是很清楚。您已经说过“当我在另一个屏幕上打开网站时，它无法正常工作”，但您还没有说它不起作用。要获得帮助，您需要详细描述以下三个方面：

您做了什么（例如，您编写的代码，运行该代码的步骤）
您对所做的事情的期望是什么
你实际得到什么结果

CSS divs不适合所有分辨率

3 个答案: