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

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 "列-mid" 设置了一个百分比宽度。它应该是 700px 宽，即 1260px 的 55.5555555555555%（包装器div 的宽度）。

在这个分辨率下，一切看起来都很好。但是，如果我将包装器div 的宽度更改为 1400px，那么列中间div 就不会扩展以正确填充空间。它的等效宽度只增加到 775px，而实际上它应该填充 794px，因为 794px 是 1430px 的 55.55555555555556%

为什么列中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

发生这种情况

是因为您没有根据整个宽度更改#column-left和#column-right width，而只是更改#column-mid的width。

对于#column-left和#column-right的width保持245px和#column-mid width具有响应性的情况，

试试这个：

#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
}

这是小提琴。