html - 当浏览器改变大小时网页变得困惑

Question

我不是一个非常有才华的网页设计师，所以当浏览器改变其大小时，我很难让我的网页保持完整。它变得一团糟，看起来很糟糕。

当浏览器处于全尺寸时，页面看起来不错。

这是调整浏览器大小之前的样子:

这是缩小浏览器后的样子:

只有当您水平调整浏览器大小时才会发生这种情况。

这是我的 CSS:http://pastebin.com/SfKT0Eth

我无法找出我的错误，因为我的 HTML/CSS 不是很好。那不是我的领域，所以我缺乏自己解决这个问题的知识。

非常感谢您的帮助。

编辑

我修复了侧边栏和深色内容空间的问题。 我未能实现的是防止屏幕变小时上层菜单(顶部导航)项掉落。

我只是在 #sidebar 中更改了这个:

width: 270px;

到

width: 19%;

http://jsfiddle.net/J3jm7/3/

Answer 1

嗨，我看到你的 fiddle 了……有几个问题:

• 第一，你用 % 设置 width 这与浏览器大小有关，你可以设置 min-width 和 max-wdith 来避免这个问题。

• 尝试在您的 html 中首先放置 float:left 框，然后在 float:right

框之后

• 我不明白为什么你对外部 div 使用 postion:absolute。

在修复了 Fiddle 的情况下查看此演示 http://jsfiddle.net/J3jm7/15/