ネストされた計算操作

Question

これは非常に簡単です。私は2つの計算を実行するためのCSSのcalc操作を使用したい：

私はCSSのCALCの操作で複数の操作を実行しようとする場合は

(100%/7) - 2 

の同等に自分の幅を設定したいです、それは失敗します：

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

1つのCSS文で複数の計算操作を実行するにはどうすればよいですか？

Answer 1

明らかに、掛け算または分割されていないすべての数値にpxまたは%を割り当てる必要があります。

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

まあ私は今や気分が悪いです。ハハ。

Answer 2

デビッドは既に述べたように、calcはpx、％、または何らかの種類の単位で動作する必要があります。それだけで好きな1つのステートメントで複数の計算を使用することが可能である：誰が答えを探して、このページを訪問して

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

、どんなユニットであってもよいことを言及する価値があるかもしれません。つまり、pxと％だけでなく、em、rem、vh、vw、vmin、vmaxなどです.Calcは通常どおりに使用できる値に変換されます。計算の結果に単位がないようにしてはいけません。

分割や乗算の際には、両側で単位を使用するのは実際には意味がありませんが、結果の割り当て対象を知るためには数値の1つに単位が必要です。

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