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%.

Я знаю, что это не имеет смысла в 100% случаев, чтобы разрешить это, но в моем случае, я хотел бы знать, какой процент 120px в ширину, который я потом кормить в мой расчет.

либо это, либо если бы кто-то мог придумать другой способ написать это, это тоже сработало бы. Я ломал голову и ничего не мог придумать.

21
css css-calc css3

1 ответов

в CSS calc() division-правая сторона должна быть <number> поэтому значения на основе единиц не могут использоваться в таком делении.

также обратите внимание, что при умножении хотя бы один из аргументов должен быть числом.

на MDN имеет отличную документацию по этому.

Если вы хотите лучший способ сделать вычисления, вы можете использовать препроцессор (мне нравится Сасс). Эта ссылка приведет вас к их руководствам (на этой странице есть раздел об операторах).

32