CSS计算 - 用嵌套

时间:2016-06-16 00:20:46

标签: css calc

我想做一个简单的嵌套计算:从另一个数字中减去一个数字(两个像素值),然后将结果乘以2.这对我不起作用:

.sample {
     width: calc(2 * (410-300)px);
}

结果将是像素宽度。

感谢任何帮助。感谢。

1 个答案:

答案 0 :(得分:3)

calc要求+/-运算符始终间隔开。另外,我需要在减去的整数上添加单位。

.sample {
  width: calc(2 * (410px - 300px));
}

一位评论者巧妙地指出了一个替代方案(稍长但添加较少的单位):

.sample {
  width: calc(2 * (410 - 300) * 1px);
}

通过Mozilla Developer Network

  

+和 - 运算符必须始终用空格包围。例如,calc(50%-8px)的操作数将被解析为百分比,后跟负长度,无效表达式,而calc的操作数(50% - 8px)是百分比,后跟减号和长度。更进一步,calc(8px + -50%)被视为长度,接着是加号和负百分比。   *和/运算符不需要空格,但允许添加它以保持一致性。



.el {
  background: red;
  display: inline-block;
  width: calc(2 * (410px - 300px));  
  height: 50px;
}

<div class="el"></div>
&#13;
&#13;
&#13;