两列（左和中）固定宽度左列和右列流体的正确 CSS答案

【问题标题】：Correct CSS for Two (Left & Mid) Column Fixed Width Left and Right Column Fluid两列（左和中）固定宽度左列和右列流体的正确 CSS
【发布时间】：2015-06-17 13:41:19
【问题描述】：

我正在处理 3 列 div。 Left 和 Mid 列在包装器内具有固定宽度（分别为 57px 和 160px），宽度为 1005px。

问题是右列应该是流体宽度并且将覆盖所有剩余空间。我尝试过使用width: (calc 100% - 217px);，但它不起作用。

我有此代码供您参考。我需要你的帮助来指出问题所在。

body {
    background-color: #444;
    margin: 0;
}
#wrapper {
     width: 1005px;
     min-height:450px;
     margin: 0 auto;
}
#leftcolumn, #rightcolumn, #mid {
    float: left;
    min-height: 450px;
    color: white;
}
#leftcolumn {
     width: 57px;
     background-color: #111;
}
#mid {
     width: 160px;
     background-color: #087;
}
#rightcolumn {
     max-width: calc (100% - 217px);
     background-color: #777;
     display:inline-block;
}

<div id="wrapper">
    <div id="leftcolumn">
        Left
    </div>
    <div id=mid>
        Mid
    </div>
    <div id="rightcolumn">
        Right
    </div>
</div>

http://jsfiddle.net/8weSA/1434/

【问题讨论】：

标签： html css multiple-columns css-calc

【解决方案1】：

calc和(之间不要加空格，语法应该是这样的：

width: calc(100% - 247px)

还要注意- 运算符周围的间距，+ 运算符需要相同的间距，但/ 和* 运算符不需要。浏览器无法识别您的 calc() 属性语法，这就是它不适合您的原因。

一些有用的链接：

calc() property support table

Mathematical Expressions: calc() Fiddle

【讨论】：

【解决方案2】：

虽然这里给出了 calc 函数的解决方案。我想展示另一种无需使用calc() 函数即可完成的方法。由于您使 #right div 向左浮动，因此它从未覆盖其余空间。查看以下代码：

body {
    background-color: #444;
    margin: 0;
}

#wrapper {
     width: 1005px;
     min-height:450px;
     margin: 0 auto;
}
#leftcolumn, #mid {
    float: left;
    min-height: 450px;
    color: white;
}
#leftcolumn {
     width: 57px;
     background-color: #111;
}

#mid {
     width: 160px;
     background-color: #087;
}

#rightcolumn {
    
     
     background-color: #777;
     width:auto;
     min-height: 450px;
     color: white;
}

<div id="wrapper">
    <div id="leftcolumn">
        Left
    </div>
    <div id=mid>
        Mid
    </div>
    <div id="rightcolumn">
        Right
    </div>
</div>

这是你的updated fiddle too

【讨论】：

【解决方案3】：

在#rightcolumn
修改行：
max-width: calc (100% - 217px);
到：
width: calc(100% - 217px);

【讨论】：

【解决方案4】：

请删除calc和(100% - 217px);之间的空格

max-width: calc (100% - 217px); 错了。

max-width: calc(100% - 217px); 是正确的。
使用width:100% 到#rightcolumn div。

访问我的演示...jsfiddle

【讨论】：