Вложенные расчетные операции

Надеюсь, это совсем просто. Я хочу использовать операцию вычисления CSS для выполнения двух вычислений:

Я хочу установить свою ширину эквивалентной

(100% / 7) - 2

Однако, если я попытаюсь выполнить более одной операции в операции вычисления CSS, произойдет сбой:

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

Как я могу выполнить несколько операций вычисления в одном выражении CSS?


css expression css-calc
person David    schedule 22.12.2013    source источник
comment
На вашем месте я бы рассмотрел LESS или другой препроцессор.   -  person Benjamin Gruenbaum    schedule 22.12.2013
comment
Или вы можете просто разделить 100 на 7 и вычесть 2   -  person Deryck    schedule 22.12.2013

Ответы (3)


arrow_upward
43
arrow_downward

Очевидно, вам нужно присвоить px или % всем числам, которые не умножаются и не делятся.

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

Ну, я чувствую себя тупым сейчас. Ха-ха.

person David    schedule 22.12.2013
comment
Все ли браузеры поддерживают вложенные выражения calc()? - person Aziz; 19.02.2016
comment
Просто чтобы уточнить, это не обязательно должно быть px или %. Это также может быть em, rem и т. д. - person rinogo; 27.04.2018
comment
К сожалению, IE по-прежнему не поддерживает вложенные выражения calc() @Aziz - person clayRay; 08.06.2020

arrow_upward
6
arrow_downward

Как уже сказал Дэвид, для работы calc требуются px, % или какие-то единицы измерения. Можно использовать несколько вычислений в одном операторе, например:

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

Для всех, кто посещает эту страницу в поисках ответов, возможно, стоит упомянуть, что это может быть ЛЮБОЙ блок. То есть не только px и %, но также em, rem, vh, vw, vmin, vmax и т. д. Calc преобразуется в значение, которое вы могли бы использовать в обычном режиме, поэтому точно так же вы никогда не назначите width: 100; вы никогда не должны позволять результату calc быть безразмерным.

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

/* 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;
person Community    schedule 18.02.2018

arrow_upward
2
arrow_downward

У меня также была сильная головная боль, когда я пытался это сделать, но, к счастью, есть альтернатива. Вместо того, чтобы записывать все это в одну строку, вы также можете использовать чистые переменные css, используя var(), что, помимо решения этой проблемы, также намного более читабельно! Вот пример того, как я его использовал:

#wrapper .leftside .week .superior {
    --wholeWidth: calc(157px * 3);
    --remaining: calc(100% - var(--wholeWidth));
    margin: 0 calc(var(--remaining) / 6);
}

Я нашел его в разделе «Вложенный calc() с переменными CSS" в документации MDN.

person aderchox    schedule 17.02.2020