嵌套計算操作

Question

希望這很簡單。我想用CSS計算操作來執行兩種計算方法：

我想我的寬度設置爲

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