html - 如何防止 div 重叠

Question

我试图制作一个使用整个屏幕的布局，所以我没有在布局上设置固定宽度。我正在使用百分比。

我正在处理这个http://www.abdhulzaman.co.uk/work/rima

正如您在顶部看到的那样，我在标题的左上角有一个徽标和一个标题，还有一个绝对位置在右侧的导航。现在当我最小化屏幕时..导航和徽标标题会重叠，这真的很烦人。

与绝对/相对位置有什么关系？这可能看起来很简单.. 将不胜感激然后帮助！谢谢 :)

它类似于http://jsfiddle.net/YFCWm/

Answer 1

您的导航大小是动态的吗？如果没有，您可以min-width为您的设置一个header（尽管最好将它设置在包装整个站点的容器中）。

Answer 2

快速解决您的问题的方法是在左侧为导航元素留出边距

margin: 0 0 0 230px;

这将防止导航从标题元素的左边缘向左“移动”超过 230 像素。

Answer 3

如果您刚开始使用 css 和布局，那么使用基于网格的框架（如 twitter bootstrap 或 blueprint css）可能是一个好主意。

http://twitter.github.com/bootstrap/

http://blueprintcss.org/

使用其中之一将使您的布局问题变得微不足道。