Question

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

使用浮点数创建具有完全流动中心列{3}}或with的3列布局有多种选择。但是，到目前为止我遇到的每个预先打包的解决方案（以及我自己尝试过的解决方案）的问题是，随着页面宽度的减小，右列将在页面的中心列顶部出现太狭隘了。

如果可能的话，我想阻止这种情况发生。理想情况下，一旦min-width被点击，右列应该保持原样，页面应该可以水平滚动。所以目标是：

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/

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

1 个答案: