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

Question

我正在处理 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/

Answer 1

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

width: calc(100% - 247px)

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

一些有用的链接：

calc() 属性支持表

数学表达式：calc() 小提琴

Answer 2

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

   max-width: calc (100% - 217px);这是错的。

   max-width: calc(100% - 217px);这是正确的。

2. 用于div width:100%。#rightcolumn

访问我的演示......在jsfiddle

Answer 3

虽然这里给出了 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>

这也是你更新的小提琴

Answer 4

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