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

Question

标题说明了。我想要一个2列的CSS布局：

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

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

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

表格很简单。我已经看了几百个示例布局，没有什么可以做我要问的所有事情，尽管有几个接近。问题似乎是以相同的方式获得流畅的左列和源排序。我找到了几个固定的左/右流体（与我想要的相反）的例子，有正确的源顺序，或流体左/右固定没有源顺序，但不是两者。

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

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

Answer 1

我强烈建议您查看CSS templates at Dynamic Drive。第五个应该是您正在寻找的（流体固定）。只需将max-width和min-width添加到主容器元素中即可完成设置。

仅供参考，这些是非常好的模板，可用作页面布局的基础。使用CSS是学习浮动和定位的好方法，它在我早期的Web开发中帮助了我。

Answer 2

我的尝试： http://www.ryankinal.com/fluid/

它并不完全有效，但这只是因为在非常小的窗口尺寸下，我的负边距会导致内容从页面上掉下来。这是理论：

1. 某个百分比的容器
2. 在100％容器处左列，并向左浮动
3. 右列包裹在0％宽度，浮动右包装
4. 固定宽度的右列（在我的示例中为200px）
5. 左列和右列左边距为右列宽度的一半（在我的示例中为100px）

因此，右栏越大，内容越容易脱落。但那和我在一个小时左右的时间里一样接近。由于将右列包裹在一个无关的div中并利用溢出：可见，所以它也有点hackish。

但他们是我的公爵（现在）。

Answer 3

你正在寻找这样的东西吗？ （负边距+浮动+适当的源顺序+固定右边）

http://blog.html.it/layoutgala/LayoutGala23.html

索引页面上的更多布局：http://blog.html.it/layoutgala/

然后只需将最小/最大宽度附加到容器中。