calc() 值中的 calc() 值答案

【问题标题】：A calc() value within a calc() valuecalc() 值中的 calc() 值
【发布时间】：2015-12-09 19:03:49
【问题描述】：

假设，我正在创建一个图片库；在一定的设备宽度下，会有三幅图像，因此，我需要计算出三分之一：

{width:calc(100% / 3)}

但是，问题是我需要去掉“2px”（两个像素）——我添加了 1px 的边距，因此需要通过从宽度中去掉它来解决这个问题，因此我需要这样做：

{width:calc(calc(100% / 3) - 2px)}

但是，这不起作用：有什么办法可以做到这一点吗？

[我需要计算出三分之一，然后从这里取走两个像素——这很混乱，因为三分之一难以格式化为百分比。]

【问题讨论】：

你试过calc(100% / 3 - 2px) 没有额外的calc() 吗？在这种情况下，我会假设除法优先？你能试试吗？
是的，运算符优先级得到尊重，请参阅docs。如果您希望明确，可以使用calc((100% / 3) - 2px)
我不确定它是否有效，我正在尝试这样做：@media screen and (min-width:1000px){.g li {width:calc(100% / 3 -2px)}}
@Sk9TSFVBQkVBTA + 和 - 运算符必须被空格包围
不是 100% 确定，但我认为您需要在运算符和操作数之间留有空格。因此，请确保您在其中有一个空间，如下所示：@media screen and (min-width:1000px){.g li {width:calc(100% / 3 - 2px)}}

标签： css calc

【解决方案1】：

为了完整起见，我将在此处添加一个答案（该解决方案已在提问者问题下方的 cmets 中发布）。

您不需要使用两个calc() 语句。将计算合并到一个 calc() 语句中就足够了。在这种情况下，正如 Andrea Ghidini 在评论中提到的（请参阅 this link），除法将优先于减法（基本数学规则适用！）。

所以你的解决方案是：

width:calc(100% / 3 - 2px)

另外，加减法一定要用空格包围，否则不行！

【讨论】：