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

Question

我正在尝试创建一个基本的3列布局.基本上中心柱应该是流动的,因为它应该扩展以消耗左右列未使用的任何空间.但是,它还需要固定min-width大约378像素.

有许多用于与一个完全流体中心柱创建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/