4

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

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

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

  1. 具有流动中心列和固定宽度左右列的 3 列布局。
  2. 具有固定最小宽度的中心列，以防止它变得太小。
  3. 一个尊重最小宽度的右列，当窗口变得太小时，它不会践踏、浮动或环绕在中心列下方。

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

4

1 回答 1

6

为此，您可以使用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/

于 2012-11-27T07:06:56.510 回答