css - style - Operaciones de cálculo anidadas

title html attribute

Question

Esperemos que esto sea bastante simple. Quiero usar la operación de cálculo de CSS para realizar dos cálculos:

Quiero establecer mi ancho en el equivalente de

(100% / 7) - 2

Sin embargo, si trato de realizar más de una operación en una operación de cálculo de CSS, falla:

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

¿Cómo puedo realizar múltiples operaciones de cálculo en una declaración CSS?

Answer 1

Aparentemente tienes que asignar px o % a todos los números que no están siendo multiplicados o divididos.

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

Pues me siento tonto ahora. Jaja.

Answer 2

Como David ya dijo, calc requiere px,% o algún tipo de unidad para funcionar. Es posible usar múltiples cálculos en una declaración como:

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

Para cualquier persona que visite esta página y busque respuestas, vale la pena mencionar que puede ser CUALQUIER unidad. Es decir, no solo px y%, sino también em, rem, vh, vw, vmin, vmax, etc. Calc se resuelve en un valor que podría usar normalmente, por lo que de la misma manera nunca asignaría ancho: 100; Nunca debes dejar que el resultado de calc sea sin unidad.

Al dividir o multiplicar, realmente no tiene sentido usar unidades en ambos lados, pero aún requiere que uno de los números tenga una unidad para que sepa qué asignar al resultado.

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