<分区>
标题说明了这一点。我想要一个 2 列的 CSS 布局:
- 居中 - 主要内容在页面上居中
- 具有固定(像素)的右列宽度
- 具有流畅的左列 - 用尽所有可用空间减去右列宽度
- 按源顺序排列 - 在 HTML 源中，左栏内容在右栏内容之前
- 允许最小宽度 - 在我的示例中为 760px
- 允许最大宽度 - 在我的示例中为 1024px
如果窗口大于最大宽度，内容将在页面的最大值处居中。如果窗口小于最大宽度，内容将 100% 填充页面，除非它小于最小宽度，这会使水平滚动条出现。
我愿意使用一些小的 javascript 来处理不支持这些属性的浏览器的最小/最大宽度(我正在看你的 IE6)，但我同样愿意让那部分布局降级。
表格非常简单。我已经浏览了数百个示例布局，但没有什么可以完成我要问的所有事情，尽管有几个很接近。问题似乎是以相同的样式获得流畅的左列和源排序。我发现了几个具有正确源顺序的左固定/右流动(与我想要的相反)的示例，或者没有源顺序的左流动/右固定的示例，但不是两者兼而有之。
我不关心它是使用 float 还是负边距，但我想避免绝对定位。
+---------------------------------------+
| |
| +---------------------------+-----+ |
| |fluid |fixed| |
| | | | |
| | | | |
| +---------------------------+-----+ |
| |
+---------------------------------------+