CSS calc () - Multiplication et division avec des valeurs unit-ed

Est-il possible d'utiliser calc() pour multiplier ou de diviser avec l'unité de base de valeurs (par exemple 100%, de 5px, etc).

Par exemple j'espérais faire quelque chose comme ceci:

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

En espérant qu'il soit résolu à quelque chose comme (en supposant que 100% = 500px):

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

Cependant, après quelques tests, il semble que je ne puisse pas disposer d'une unité basée sur la valeur que le dénominateur de la division.

Aussi, je ne semble pas être en mesure de multiples deux valeurs comme 5px * 10px ou 5px * 100%.

Je sais que ça n'a pas de sens dans 100% des cas pour permettre cela, mais dans mon cas d'utilisation, j'aimerais savoir quel est le pourcentage de 120px est de la largeur totale, que j'ai ensuite alimenter le reste de mon calcul.

Soit ça, ou si quelqu'un pouvait trouver une autre façon de l'écrire, cela fonctionne ainsi. J'ai accumulé mon cerveau et je ne pouvais pas trouver quoi que ce soit.

source d'informationauteur samanime

  1. 28

    En CSS calc() de la division de la droite doit être un <number> donc l'unité de base de valeurs ne peut pas être utilisé dans le titre de ce genre.

    Également noter que dans la multiplication d'au moins un des arguments doit être un nombre.

    La MDN a beaucoup de documentation sur ce sujet.

    Si vous souhaitez une meilleure façon de faire les calculs, vous pouvez utiliser un préprocesseur (j'aime Sass). Ce lien vous mènera à leurs guides (sur cette page il y a une section sur les opérateurs).