嵌套的calc操作

Question

希望这很简单。我想使用CSS calc操作来执行两个计算：

我想将宽度设置为相当于

(100% / 7) - 2

但是，如果我尝试在CSS计算操作中执行多个操作，则会失败：

width: calc((100% / 7) - 2);

如何在一个CSS语句中执行多个calc操作？

Answer 1

显然，您必须将px或%分配给所有未被倍增或分割的数字。

width: calc((100% / 7) - 2px);

我现在感到愚蠢。哈哈。

Answer 2

正如David所说，calc需要px，％或某种单位才能工作。可以在一个语句中使用多个计算，如：

width: calc((100% / 7) - 2px);

对于访问此页面寻找答案的其他人，可能值得一提的是它可以是任何单位。也就是说，不仅仅是px和％，而且还有em，rem，vh，vw，vmin，vmax等.Calc解析为一个你可以正常使用的值，所以同样的方式你永远不会指定宽度：100 ;你永远不应该让calc的结果无单位。

在划分或乘法时，使用双方单位并没有多大意义，但仍需要其中一个数字才能拥有一个单位，以便知道分配结果的内容。

/* These are wrong */
width: calc(75 + 25);
width: calc(4 * 20);
width: 100;

/* These are what the browser expects */
width: calc(75px + 25px);
width: calc(20px * 4);
width: 100px;

Answer 3

当我尝试这样做时，我也很头疼，但是幸运的是还有另一种选择。除了将它们全部写成一行之外，您还可以使用var()使用纯css变量，除了解决此问题外，它还更具可读性！这是我的用法示例：

#wrapper .leftside .week .superior {
    --wholeWidth: calc(157px * 3);
    --remaining: calc(100% - var(--wholeWidth));
    margin: 0 calc(var(--remaining) / 6);
}

我在MDN文档的“ Nested calc() with CSS Variables”下找到了它。