html - 3 列 - 带溢流元件的中心列流体

Question

我有一个三栏网站。外柱是固定的，中间柱是流动的。我用

实现了这个

<div style="display:table">
    <div style="display:table-row">
        <div style="display:table-cell">
        </div>
        <div style="display:table-cell">
        </div>
        <div style="display:table-cell">
        </div>
    </div>
</div>

(完整代码见jsfiddle)

现在我在中间列中有一个可能变得太宽的元素。我用

隐藏它

overflow:auto

所以会有滚动条。

编辑:
不起作用抱歉:http://jsfiddle.net/WtWCC/
确实有效:http://jsfiddle.net/WtWCC/2/

Chrome 的说明:
在提供的示例中，单击“+”直到出现滚动条(单击次数越多，问题越明显)。带有滚动条的 View 是我喜欢的:2 个固定列可见，中间列最大化。

现在调整浏览器的大小。 (或 jsfiddle Pane )

现在的问题是中间的柱子变大了。右栏被隐藏。

有人知道这个问题的解决方案吗？

提前致谢。

编辑:所描述的行为是在 Chrome 中。在 IE 和 Firefox 中，Overflow:auto 根本不起作用。

Answer 1

您的 JSFiddle 有问题，如果这对您没有帮助，我们深表歉意。

HTML:

<div class="wrap">
  <div class="left">
    Leftees
  </div>
  <div class="right">
    Righties
  </div>
  <div class="middle">
    Middies
  </div>
</div>

CSS:

.wrap{
    width:100%;
    overflow:hidden;
}
.left{
    float:left;
    background:red;
}
.middle{
    overflow:hidden;
    background:green;
}
.right{
    float:right;
    background:yellow;
}

jsfiddle