CSS静态宽度侧列，最小 - 最大宽度中心内容列

Question

我有以下小提琴让人们看http://jsfiddle.net/defaye/DhaHP/4/ 全屏显示结果：http://jsfiddle.net/defaye/DhaHP/4/embedded/result/

我遇到的问题是，当超过调整窗口大小的某个宽度时，左列离开该组。我需要它们保持接触，中心柱的最小宽度为400到最大宽度为800px，边宽为200px。但是标题应该是100％。

任何人都知道如何解决这个问题？这让我疯了。

Answer 1

这是一个工作小提琴：http://jsfiddle.net/PhilippeVay/DhaHP/8/（编辑：现在可以使用Chromium）

修改：

• HTML：#center column
之前的#left
• CSS：根本没有相对定位
父项上的
• display: table; 和3列上的table-cell。这将在视觉上（并且仅在视觉上）表格。好吧，表格布局而不是表格结构。
• #left上的200px宽度和#right
在父项上
• table-layout: fixed; 将表格算法切换为与作者所说的维度相关的算法，而不是那些由单元格内容维度猜测的算法
• 父 min-width: 800px; （400 + 200 + 200）和祖父 max-width: 1200px; （800 + 200 +）的约束宽度200）（编辑：#container上的max-height仅适用于Fx，而不适用于Chrome）。令我惊讶的是，它按原样运作。

兼容性：IE8 +
如果需要，您可以使用IE6 / 7来使用内联块（对于过时的浏览器，您可以使用IE6 / 7等效的内联块display: inline; zoom: 1;）

Answer 2

这是另一个与IE6 +兼容的示例：http://jsfiddle.net/DhaHP/12/ 结果：http://jsfiddle.net/DhaHP/12/embedded/result

变化摘要：

• 将#left和#right更改为高于#center（#right之前的#left）;
• min-width和max-width #container分别为800px和1200px;
• #center;
上没有浮动
• margin-left和margin-right上的#center等于每个边栏的宽度;
• float-left位于#left和float-right #right;

对于IE6，唯一的障碍是最小宽度和最大宽度，如果没有一点点黑客或使用IE7.js就无法工作。在IE7上，它可以正常工作。