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

我有一个三栏式网站。外柱是固定的，中柱是流体。我实现了这个与3列 - 带溢流元件的中心柱流体

<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中，溢出：auto根本不起作用。

来源

2013-02-20 JDC

演示的JS部分似乎并没有工作。 – cimmanon 2013-02-20 15:52:28

如果您的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

来源

2013-02-20 18:06:42

Thx为您的答案。我知道这个相当不错的CSS设计。我对它的最大问题是，HTML的顺序不正确。随着HTML呈现，我不能（或不容易）改变这一点（只通过改变JavaScript的DOM）。 – JDC 2013-02-21 12:38:13

@JDC这是一个很好的观点。通过直接访问HTML结构，这种攻击绝对受到限制。假设你可以在视图中的哪个区块中切换哪些内容，但是又需要直接访问它，而且它更多的是黑客攻击。 – 2013-02-21 23:52:45

我投这个答案，因为它是唯一的解决方案。虽然我知道这个解决方案，但我认为它仍然看起来像一个黑客，我只想使用它，如果没有其他的作品。我最初做的事情的呈现在我的任何浏览器中都是愚蠢的观点。 – JDC 2013-03-06 15:14:54

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

回答

相关问题