CSS：具有半流体中心的三列布局

Question

我正在尝试创建基本的3列布局。 本质上，中柱应该是流动的，因为它应该膨胀以消耗左柱和右柱未使用的任何空间。 但是，它还需要具有约378个像素的固定min-width 。

有许多用于与一个完全流体中心柱创建3列布局，选项与或不使用浮动。 但是，到目前为止，我遇到的每个预打包解决方案（以及我自己尝试过的解决方案）的问题是，随着页面宽度的减小，一旦页面缩小，右列将位于中间列的顶部变得太狭窄。

如果可能，我想防止这种情况。 理想情况是，一旦达到min-width则右列应保持在原位置，并且页面应可水平滚动。 因此，目标是：

1. 3列布局，带有流体中心柱和固定宽度的左右柱。
2. 具有固定最小宽度的中心列，以防止它变得太小。
3. 当窗口变得太小时，一个遵循最小宽度并且不践踏，不漂浮或不包裹在中心列下方的右列。

首选纯CSS解决方案，但是如果有使用一些聪明的JavaScript的简单方法，我也不反对这种方法。

Answer 1

为此，您可以使用display：table属性。 这样写：

#wrapper{
    display:table;
    width:100%;
    height:100%;
}
#wrapper > div{
    display:table-cell;
    height:100%;
}

#left {
    width:50px;
    min-width:50px;
    background-color:pink;
}

#center {
    background-color:green;
    min-width:200px;
}

#right {
    width:50px;
    min-width:50px;
    background-color:red;
}

body, html{
    width:100%;
    height:100%;

}

检查此http://jsfiddle.net/ykAPM/137/