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说明：
在提供的示例中，单击“+”直到滚动条出现（您点击的问题越多，问题就越清楚）。滚动条的视图是我喜欢的：2个固定列可见，中间列最大化。

现在调整浏览器的大小。（或jsfiddle窗格）

现在的问题是中间栏变得更大。右列被隐藏了。

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

提前致谢。

编辑：描述的行为是在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

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

1 个答案: