Question

我刚刚花了几周时间学习如何正确设计布局。我基本上认为我的网站布局一切都很完美，并准备将编码转移到Wordpress ...然后我不小心调整了我的网页浏览器的大小，发现我的所有div图层都相互重叠。

这是它的样子： overlapping divs

基本上看起来它主要是我的中心内容div被挤出来，以及我的标题图片和导航女巫在同一个顶部div。我的页脚也被挤压了。我在互联网上搜索了这个问题的解决方案，似乎无法找到答案。

如何解决这个问题，以便在调整浏览器大小时保留div个位置？

Answer 1

正如沃尔特所说，你的CSS会有所帮助。但是，主要问题是div中的内容溢出到其他div，因为内容的div不能包含所有内容。
在你的CSS中，尝试将div的overflow属性设置为auto（显示滚动条）或隐藏（只是隐藏内容，如果它超出了div） e.g。

overflow:auto;

或

overflow:hidden;

Answer 2

我明白了。事实证明，我的中心内容边距的宽度由边距决定，而不仅仅是直接宽度（即500px）。因此，无论何时调整页面大小，浏览器两侧的边距都会保持原样，从而使整个列更小。我只需要删除边距并指定我希望列位于页面上的位置，并为其确定宽度。

Answer 3

在ems中显示您的宽度和字体大小。这是一个很好的计算器： http://riddle.pl/emcalc/

百分比也可以。

检查stackoverflow中的css，并尝试在此处调整浏览器中的缩放级别 - 您将看到在任何缩放级别上所有内容都可以很好地调整大小。

Answer 4

你也可以试试最小宽度。我假设中心div是流动的，侧边栏是固定宽度的。

Answer 5

你可以张贴一些CSS吗？

最简单的方法是为所有列提供相对合理的width设置，以便浏览器窗口的大小不会影响布局的大小。使流体宽度列表现得更复杂，更多地取决于布局的细节。

Answer 6

查看min-width属性。另一个选项是在视口宽度低于x像素且CSS3 Media Queries时应用另一个样式表，如下所示：

@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来解决这个问题。

Answer 7

如果您的DIV容器中有宽度和高度，我会遇到同样的问题，除非您输入最小宽度，否则它不会改变宽度。我遇到的问题是，当我在浏览器窗口中设置div时，请转到下一行

所以我所做的是在容器中我设置了高度和宽度。在我没有设定高度之前，我让div确定高度。