如何实现复杂的CSS布局？

Question

我这里有一个页面。 有一个内容面板和一个内容面板。 我想将内容居中，然后将内容面板推到右上角。 这种行为已经奏效。

但是 ，当页面缩小时，布局无法正常工作。 理想情况下，内容将被推送到屏幕的右侧，内容和内容之间保持5px间隙。 然而，目前，内容只是重叠内容，这不是我想要的。

这样的布局是否可行，而不是诉诸javascript？

编辑：您可能会注意到页面边缘的滚动条。 那个滚动条不是 body的滚动条，而是div#main ，原因是我不希望内容随页面滚动。

Answer 1

我相信使用容器上的min-width属性是可以实现的。 期待ie6的问题。 它无法识别最小宽度声明。

Answer 2

不只是最小宽度。 我设法通过执行以下操作来实现布局：

对于#main add（调整值以满足您的需要）：

• 最小宽度：950px;

对于#contents添加：

• 漂浮：对;
• margin-top：5px;
• 保证金权利：20px;

对于#contents ol remove：

• 位置
• 对
• 最佳

Answer 3

我建议你看看YUI CSS Grid布局，以便将来实现类似的问题。 见http://developer.yahoo.com/yui/2/