ネストされた計算操作
うまくいけば、これは非常に簡単です。 CSS計算操作を使用して2つの計算を実行したいと思います。
幅を同等に設定したい
(100% / 7) - 2
ただし、CSS計算操作で複数の操作を実行しようとすると、失敗します。
width: calc((100% / 7) - 2);
1つのCSSステートメントで複数の計算操作を実行するにはどうすればよいですか？
どうやら、乗算または除算されていないすべての数値にpxまたは%を割り当てる必要があります。
width: calc((100% / 7) - 2px);
さて、今は馬鹿げています。ハハ。
Davidがすでに述べたように、calcが機能するには、px、％、または何らかの単位が必要です。次のように、1つのステートメントで複数の計算を使用することができます。
width: calc((100% / 7) - 2px);
答えを探してこのページにアクセスする他の人にとっては、それはどのユニットでもかまいません。つまり、pxと％だけでなく、em、rem、vh、vw、vmin、vmaxなどもあります。Calcは通常使用できる値に解決されるため、同じように幅を割り当てることはありません。 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;