3

我真的在为此苦苦挣扎，如果有人能帮助我，我永远感谢你。

我有一个宽度为 1260px 的 CSS DIV，称为 wrapper：

#wrapper {
width: 1260px;
}

在这个包装器 DIV 中，我有三个 DIV，分别称为 column-left、column-mid 和 column-right：

#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 不会扩展以正确填充空间。当它实际上应该填充 794px 时，它的等效宽度仅增加到 775px，因为 794px 是 1430px 的 55.55555555555556%

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

4

2 回答 2

3

为什么不尝试这种方法：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% 高度，左侧的高度根据内容而定。

于 2013-10-28T12:37:18.127 回答
2

发生这种情况是因为您没有根据整个宽度而改变，width而#column-left只是改变。#column-rightwidth#column-mid

对于widthof#column-left和#column-rightto保持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
}

这是小提琴。

于 2013-10-28T12:22:19.027 回答