在调整浏览器大小时,如何防止div层重叠？

Question

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

这是它的样子:

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

如何修复它以便div在调整浏览器大小时保持原样？

Answer 1

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

overflow:auto;

要么

overflow:hidden;

Answer 2

我想到了。事实证明，我的中心内容边距的宽度是由边距决定的，而不仅仅是直接宽度（即 500px）。因此，每当调整页面大小时，浏览器两侧的边距都会尝试保持原样，从而使整个列变小。我只需去掉边距并指定我希望该列位于页面上的位置，并调整其宽度即可。