动态 CSS 布局帮助

Question

我正在尝试制作一个应该非常有弹性的单一 CSS 布局。我的意思是我有一个 3 列布局，页眉和页脚都在一个容器中并居中。我选择在容器中制作它，因为我想让它适合图形。因此，容器允许我非常快速地更改分辨率。

在容器中，我使用浮动制作了 3 列布局，因为我希望在您降低分辨率或浏览器窗口时产生这种效果，其中中心和右侧 div 重新排列到左侧。这样页面将非常有弹性，并且对浏览器、分辨率甚至移动设备都友好。

我做了我认为完美的布局，但有一个主要问题我不知道如何解决。

所以我有一个左列（菜单）向左浮动并设置了宽度（以便将来的 css 按钮具有相同的大小）。然后我有主要内容 div，也向左浮动，设置了 max-width 以使浏览器将其浮动在菜单旁边。如果没有设置宽度，它会在菜单 div 下浮动。最后，我的右列 div 也设置了宽度并浮动到左侧。当我在内容 div 中有足够的文本时，这种布局就完美了。

但是当文本不够宽时，内容 div 会变小，并且基本上会破坏布局，因为所有内容都向左移动并在容器右侧留下大量空间。

我希望也许有一些技巧可以使其更宽而无需将其设置为固定宽度，因为这样它就会失去弹性效果，因为一旦浏览器到达内容 div，就会出现一个水平滚动条，我不想要这个这么快就发生了。

我尝试将其设置为百分比宽度，但这看起来很奇怪。

我的布局托管在 here, on my school webserver，它是一个稍旧的版本，右 div 向右浮动，但正如我所描述的那样。

如果有一些 css 方式，请告诉我。谢谢。

Answer 1

为什么中心内容需要浮动？如果您将左 div 向左浮动，右 div 向右浮动然后包含中心内容，它应该从它们的中间向下流动。您可能希望将整个内容放在容器 div 中以限制最大宽度。

Answer 2

使用百分比

#left_menu{ width:15%; }
#content{ width:72.5%; }
#right_menu{ width:12.5%; }

---

更新

如果您希望左右固定并且只有中心浮动，则将左右 div 放在中心内。相对中心位置，左右绝对位置。

http://www.jsfiddle.net/gaby/mBuf9/ 的示例