Question

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

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

我有这些代码供您参考。我需要你的帮助来指出错误。

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

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

Answer 1

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

width: calc(100% - 247px)

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

一些有用的链接：

calc() property support table

Mathematical Expressions: calc() Fiddle

Answer 2

虽然这里给出了关于calc函数的解决方案。我想展示另一种方法，可以在不使用calc()函数的情况下完成。既然你让#right div向左浮动，它就永远不会覆盖剩下的空间。请查看以下代码：

＆＃13;

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

＆＃13;

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

＆＃13;

这是您的updated fiddle too

Answer 3

#rightcolumn中的

修改行：
max-width: calc (100% - 217px);
至：
width: calc(100% - 217px);

Answer 4

请删除calc和(100% - 217px);
之间的空格
max-width: calc (100% - 217px);这是错的。

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

访问jsfiddle

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

4 个答案: