嵌套的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 的结果是无单位的。

在除法或乘法时，两边都使用单位实际上没有意义，但它仍然需要其中一个数字有一个单位，以便它知道分配结果的内容。

/* 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;