1

我正在用 HTML 和 CSS 编写一个网站。我的问题是，例如，当我在浏览器中运行我的网站时，我会用百分比调整所有边距。但是，当我全屏运行浏览器或调整窗口大小时，网站的不同部分会分崩离析，无法按应有的方式组合在一起。为什么百分比单位不能解决这个问题，因为它与窗口的大小有关？

CSS：

#aboutMeDiv
{
    background-image: url('noisyBlue.png');
    position: absolute;
    width: 100%;
    height: 118px;
    margin-top: 13.6em;
    margin-left: -0.7%;
    opacity: 0.5;
    transition: opacity 0.3s;
}

即使窗口发生变化，我怎样才能使其“以相同的方式”？谢谢！

4

1 回答 1

2

如果没有看到您的代码，就无法给出更准确的答案，但这个问题可能可以通过在容器元素中添加min-widthand来解决。max-width

例如，如果结构在宽度小于 700 像素和大于 1500 像素时似乎分崩离析，您可以使用以下命令：

.container {
    max-width: 1500px;
    min-width: 700px;
}

当然，这可能会抑制响应式设计——尤其是对于移动浏览器。看看一些已经制作好的 CSS 框架，比如Twitter Bootstrap和Gumby 框架，可能是个好主意。

编辑以下代码添加到问题：

即使窗口发生变化，我怎样才能使其“以相同的方式”？谢谢！

如果#aboutMeDiv即使窗口大小发生变化，您也想“以同样的方式”，您应该使用具体数字而不是 div 大小的百分比；即更改width: 100%;为类似的东西width: 700px;。然后，如上所述，您可以使用 amin-width确保屏幕显示 div 中的所有内容。

于 2013-03-28T21:42:25.000 回答