-3

当我制作网站时，它适合我的屏幕，但是当我在另一个屏幕上打开网站时，它无法正常工作（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

最后编辑：我用百分比固定它。它似乎工作得很好！感谢您的所有回答！我知道这会给我一种坏名声，因为我没有让自己足够清楚。

4

3 回答 3

2

您可以使用百分比代替像素。

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

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

WidthPercentage = ContainerWidth / ScreenWidth * 100

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

WidthPercentage = 960 / 1360 * 100 = 70.5%

这称为响应式设计。

你可以在这里找到一些指导方针和一些好的文章。

于 2013-01-24T13:23:17.630 回答
1

如果您不想使用百分比，可以使用响应式设计和媒体查询。基本上，您根据不同的浏览器属性（例如：宽度）调用不同的 CSS 规则。在这里查看一个很好的教程（你也可以看到它的实际效果）。

引用：

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

于 2013-01-24T13:43:04.057 回答
0

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

你的问题不是很清楚。你说过“当我在另一个屏幕上打开网站时，它不能正常工作”，但你没有说它是如何工作的。要获得帮助，您需要足够详细地描述以下三件事：

  • 你做了什么（例如你写了什么代码，你正在采取什么步骤来运行那个代码）
  • 你期望从你所做的事情中得到什么结果
  • 你实际上得到了什么结果
于 2013-01-24T14:16:47.750 回答