我刚刚花了几周时间学习如何正确地设计一个布局。我本以为网站的布局已经完美无缺了，准备将代码转移到WordPress上...然后我意外地调整了浏览器大小，发现所有的
层都重叠在一起。
这就是它的样子:
基本上看起来好像我的中心内容
正在被挤出来，同时我的标题图像和导航也在同一个顶部
中。我的页脚也被挤压了。我在互联网上搜寻了解决这个问题的方法，但好像找不到什么有用的信息。
如何修复这个问题，让我的
在浏览器调整大小时保持在原位？
7个回答
12
正如Walter所说，您的CSS将非常有帮助。但是，主要问题在于div中的内容溢出到其他div，因为内容的div无法容纳所有内容。
在您的CSS中，尝试将div的overflow属性设置为auto（显示滚动条）或hidden（如果内容超出div，则仅隐藏内容）
例如：
如Walter所言，您的CSS将很有帮助。但是，主要问题是
中的内容溢出到其他
中，因为内容的
无法包含所有内容。
在您的CSS中，尝试将
在您的CSS中，尝试将
的overflow属性设置为auto（显示滚动条）或hidden（如果内容超出
则仅隐藏内容）。
overflow:auto;
overflow:hidden;
- ErikHazzard
5
1我尝试了您的建议，但不确定在哪里放置溢出属性。我将其放入包含所有其他内容的容器div中，但不幸的是没有起作用。尽管如此，这是我的整个CSS链接。我不确定什么是相关的或不相关的。非常感谢您迄今为止提供的帮助。我希望有一种简单的方法来解决这个问题。 :( - Rebecca
溢出内容将进入包含“这是一个副标题”文本的任何 div 中。如果您将其放在包含标题文本的 div 上面的父 div 中，则可能无法正确继承。您能同时发布 HTML 吗？另外，正如先前所说，灵活的宽度通常是更好的选择，但需要您重构 CSS。 - ErikHazzard
很遗憾，溢出好像对我没起作用。我发现图片在黑色页眉区域（其中包含我的网站名称和导航）也会变形。我上传了测试页面，这样你就可以看到它是如何工作的（而不是不工作）。 http://lifesgarbage.com/rebnation.html - Rebecca
在你的 #content 中添加 overflow:hidden
例如，
#content {
...你的代码...
overflow:hidden;
}这应该可以解决图像超出 div 的问题。你也可以将那些边框图片设为透明（使用 .png 或透明的 .gif）
顺便说一句，不错的网站。 - ErikHazzard
我在你告诉我的地方尝试了overflow:hidden，现在内容与左侧边栏合并了。我刚刚上传了CSS文件，所以你可以查看测试页面的地址并自行查看。我不确定为什么我的新布局对简单的浏览器调整大小有反应。基本上，我只想让一个水平滚动条出现在浏览器底部，这样观看者就可以调整窗口大小并仍然滚动浏览网站。我真的不希望任何内容消失或其他情况发生。如果我一开始没有表达清楚，那我很抱歉。 - Rebecca
2
使用 em 作为宽度和字体大小的单位。这里有一个好用的计算器：http://riddle.pl/emcalc/
百分比也可以使用。
在 stackoverflow 上查看 css，并尝试在浏览器中调整缩放级别 - 您会发现所有内容都可以在任何缩放级别下很好地自适应。
- George Sisco
2
我明白了。原来我的中心内容边距的宽度是由边距而不是直接宽度（例如500像素）决定的。因此，每当页面被调整大小时，浏览器两侧的边距会试图保持原样，从而使整个列变小。我只需要去掉边距，并指定我想要的列在页面上的位置，然后为其指定一个宽度即可。
- Rebecca
1
你也可以尝试使用min-width属性。我假设居中的div是自适应宽度，而侧边栏则是固定宽度。
- Capi Etheriel
0
请查看min-width属性。另一个选项是使用CSS3 Media Queries在视口宽度低于x像素时应用另一个样式表，如下所示：
@media all and (max-width: 30em) {
/* Alternative narrow styles */
}
或者如此：
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3媒体查询仍然没有得到广泛支持，因此你可能需要考虑通过window.onresize事件用JavaScript应用“窄”样式表的解决方案。我建议使用jQuery来实现这样的解决方案。
- Asbjørn Ulsberg
0
你能发一些你的CSS代码吗？
最简单的方法是给所有列相对合理的宽度设置，这样浏览器窗口的大小不会影响布局的大小。让流体宽度的列行为更复杂，更取决于您布局的具体情况。
最简单的方法是给所有列相对合理的宽度设置，这样浏览器窗口的大小不会影响布局的大小。让流体宽度的列行为更复杂，更取决于您布局的具体情况。
- Walter Mundt
0
我曾经遇到过同样的问题，如果你在DIV容器中设置了宽度和高度，除非你设置一个最小宽度，否则它不会改变。我的问题是当我调整浏览器窗口大小时，div会跳到下一行。
所以我做的是在容器中设置了高度和宽度。之前我没有设置高度，而是让div决定高度。
- Brandon Langlois
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接