49

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また、 orのように 2 つの値を一緒に乗算することもできないようです5px * 100%。

これを許可するのは 100% のケースでは意味がないことはわかっていますが、私のユースケースでは、120px が全体の幅の何パーセントであるかを知りたいです。計算。

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

4

2 に答える 2

58

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

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

MDNには、これに関する優れたドキュメントがあります。

より良い計算方法が必要な場合は、プリプロセッサを使用できます (私はSassが好きです)。そのリンクをクリックすると、ガイドが表示されます (そのページにはオペレーターに関するセクションがあります)。

于 2015-04-08T03:16:59.717 に答える