css - 嵌套计算操作

Question

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

我想将我的宽度设置为相当于

(100% / 7) - 2

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

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

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

Answer 1

显然，您必须分配px或分配%给所有未被乘或除的数字。

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

嗯，我现在感觉很笨。哈哈。

Answer 2

正如大卫已经说过的那样，计算需要 px、% 或某种单位才能工作。可以在一个语句中使用多个计算，就像：

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

对于访问此页面以寻找答案的任何其他人，可能值得一提的是它可以是任何单位。也就是说，不仅是 px 和 %，还有 em、rem、vh、vw、vmin、vmax 等。 Calc 解析为您可以正常使用的值，因此您永远不会指定 width: 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

当我尝试这样做时，我也很头疼，但幸运的是还有另一种选择。您也可以使用纯 css 变量 using ，而不是全部写在一行中，var()这不仅解决了这个问题，而且更具可读性！这是我如何使用它的示例：

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

我在 MDN 文档中的“带有 CSS 变量的嵌套 calc() ”下找到了它。