Question

我真的很挣扎，如果有人能帮助我永远的感谢，那就是你。

我有一个宽度为1260px的CSS DIV，称为包装器：

#wrapper {
width: 1260px;
}

在这个包装器DIV中，我有三个DIV，分别是列左，列中和右列：

#column-left {
width: 245px;
float: left;
}

#column-mid {
width: 55.55555555555556%; /* (700px/1260px) */
float:left
margin-left: 35px;
margin-right: 35px;
}

#column-right {
width: 245px;
float:left;
}

很简单，它是包装器div中的三列布局。中间div“column-mid”具有百分比宽度设置。它应该是700px宽，这是1260px（包装div的宽度）的55.55555555555556％。

这个决议看起来都很好。但是，如果我将包装div的宽度更改为1400px，则column-mid div不会扩展以正确填充空间。它的等效宽度仅增加到775px，实际上它应该填充794px因为794px是55.55555555555556％的1430px

为什么column-mid div只能达到775px？我想要实现的是左右列保持固定大小（245px），但中间列应该相对于包装div的大小增加。

Answer 1

为什么不尝试这种方法：http://jsfiddle.net/Er8uX/2/

#wrapper {
    width: 1260px;
    border: 1px solid #ddd;
    overflow: hidden;
    position: relative;
}
#column-left {
    width: 245px;
    position: absolute;
    left: 0;
    border: 1px solid #f0f;
}

#column-mid {
    margin: 0 280px;
    border: 1px solid #00f;
}

#column-right {
    width: 245px;
    border: 1px solid #f0f;
    position: absolute;
    height: 100%;
    right: 0;
}

我认为这就是你想要的，基本上：固定左右列，主要内容根据包装宽度。我使用绝对定位来保持它们的位置;在右边一个我已经使用了100％的高度，如果你有一个背景的列，并希望它一直向下运行，左边的根据内容有高度。

Answer 2

这种情况正在发生，因为您没有根据整个宽度更改width #column-left和#column-right，而只是更改width的{{1}}。

对#column-mid width #column-left #column-right 245px和width #column-mid作出回应的情况，

试试这个：

#column-mid {
    width: calc(100% - 560px); //245px for #column-left, 245px for #column-right and 70px for margin
}

另一种解决方案：

尝试：

#wrapper {
    display:table;
}
#column-left,#column-mid,#column-right{
    display:table-cell;
}
#column-left,#column-right{
    width: 245px;background:#f7f7f7;
}
#column-mid {
    background:#ccc;
    padding:0 35px;//for spacing
}

Here is the fiddle.

CSS百分比和像素布局相结合

2 个答案: