CSS:居中,流畅左,固定右,源有序布局,最小/最大宽度

Question

标题说明了.我想要一个2列CSS布局:

• 居中 - 主要内容以页面为中心
• 具有固定(像素)右列宽度
• 有一个流体左列 - 用尽所有可用空间减去右列宽度
• 是源排序 - 左列内容位于HTML源中的右列内容之前
• 在我的例子中允许最小宽度 - 760px
• 在我的示例中允许最大宽度 - 1024px

如果窗口大于最大宽度,则内容将以页面的最大值为中心.如果窗口小于最大宽度,则内容将填充页面的100%,除非它小于最小宽度,这将使水平滚动条出现.

我愿意使用一些小的javascript来处理不支持这些属性的浏览器的最小/最大宽度(我正在看你IE6),但我只是愿意让这部分布局降级.

用桌子来简单下降.我已经看了几百个示例布局,没有什么可以做我要问的所有事情,尽管有几个接近.问题似乎是以相同的方式获得流畅的左列和源排序.我已经找到了几个固定的左/右流体(与我想要的相反)的例子,其具有适当的源顺序,或流体左/右固定而没有源顺序,但不是两者.

我不在乎它是否使用浮点数或负边距,但我想避免绝对定位.

+---------------------------------------+
|                                       |
|  +---------------------------+-----+  |
|  |fluid                      |fixed|  |
|  |                           |     |  |
|  |                           |     |  |
|  +---------------------------+-----+  |
|                                       |
+---------------------------------------+

Answer 1

我强烈建议您查看Dynamic Drive 上的 CSS 模板。第 5 个应该就是您要寻找的（流体固定）。只需将max-width和添加到主容器元素即可。min-width

仅供参考，这些模板非常适合用作页面布局的基础。使用 CSS 是学习很多关于浮动和定位的好方法，它对我早期的 Web 开发确实有帮助。