CSS：以最小/最大宽度为中心，左边流畅，右边固定，源排序布局

Question

标题说明它。我想，一个2列CSS布局：

• 居中 - 的主要内容是在页面上居中
• 具有固定的（像素）右列宽度
• 具有流体左栏 - 用完所有可用空间减去右边的列宽
• 是源下令 - 左边的列内容来自于HTML源
• 允许的最小宽度右栏内容之前 - 在我的例子760px
• 允许最大宽度 - 10 24px在我的示例中

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

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

它简单地用表格简化。我仔细研究了数百个示例布局，没有任何事情可以完成我所要求的所有事情，尽管有几个接近。这个问题似乎得到了一个流畅的左列和源代码相同的风格。我发现了几个固定的左/流体右（与我想要的相反）的正确源顺序的例子，或流体左/右固定没有源排序，但不是两者。

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

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

Answer 1

我强烈建议您检查一下CSS templates at Dynamic Drive。第五个下降应该是你正在寻找（流体固定）。只需将一个max-width和min-width添加到主容器元素，并且应该全部设置。这些都是很好的模板，可以用作页面布局的基础。玩CSS是一个很好的学习浮标和定位的好方法，它在web开发的早期帮助了我。

Answer 2

你在找这样的事吗？ （缘阴性+浮子+正确源顺序+右固定）

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

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

然后只是追加最小/最大宽度到容器上。

Answer 3

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

它完全不起作用，尽管这仅仅是因为在非常小的窗口大小，我负利润率可能会导致内容脱落的页面。这里的理论：

在在容器的100％一定百分比

左栏

1. 容器中，并向左浮动
2. 包裹在0％的宽度右列的浮式右包装
3. 在固定右列（在我的例子100像素）（在我的例子200像素）宽度
4. 左栏和右列的宽度的一半的右列左右边距

所以，右栏越大，内容越容易脱落。但是，这距离我在一个小时左右的时间内就已经接近了。由于将右列包装在一个无关的div中并利用溢出：可见，这也有点冒失。

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