web-dev-qa-db-ja.com

CSS calc（）-単位値による乗算と除算

Calc（）を使用して、単位ベースの値（100％、5pxなど）で乗算または除算することは可能ですか？.

たとえば、私はこのようなことをしたいと思っていました：

width: calc(100% * (.7 - 120px / 100%));

それが次のようなものに解決されることを望んでいます（100％= 500pxと仮定）：

width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);

しかし、いくつかの実験の後、除算の分母として単位ベースの値を持つことができないように見えます。

5px * 10pxや5px * 100%のように、2つの値を一緒に複数使用することもできないようです。

これを許可するのは100％のケースでは意味をなさないことはわかっていますが、ユースケースでは、幅全体の120pxのパーセンテージを知りたいので、残りの部分にフィードします計算。

それ、または誰かがそれを書く別の方法を見つけ出すことができれば、それもうまくいくでしょう。私は頭を悩ませたが、何も思い付かなかった。

csscss3css-calc
27
samanime

CSS calc（）除算-右側は<number>でなければならないため、このような除算では単位ベースの値を使用できません。

また、乗算では、少なくとも1つの引数が数値でなければならないことに注意してください。

[〜＃〜] mdn [〜＃〜] にはこれに関する素晴らしいドキュメントがあります。

計算を行うより良い方法が必要な場合は、プリプロセッサを使用できます（ Sass が好きです）。そのリンクからガイドに移動します（そのページには、オペレーターに関するセクションがあります）。

44
Andrew Hendrie