css calc数字划分

Question

如果我使用计算器，2/3是0.6666666667，这是关于67%。但是，如果我尝试使用css calc做同样的事情，我会收到错误。

width: calc(2 / 3);

这有什么工作方式吗？

我认为它看起来不像0.666666666667那样好。欢迎任何想法。

Answer 1

问题是calc(2 / 3)你会得到一个没有单位的数字。 CSS无法仅显示数字宽度。这就像你设置width: 3显然不起作用。

如果你想要百分比，你需要将它乘以100％

width: calc(2 / 3 * 100%);

如果你真的想以像素为单位将结果乘以1px

width: calc(2 / 3 * 1px);

Answer 2

用这个：

width: calc(100% / 3 * 2);

据我所知，CSS calc不会将分数转换为百分比。

Answer 3

你需要乘以100将其转换为%

div{
  background-color: red;
  width: calc( (2/3)*100% );
  
}

<div>yeah</div>

Answer 4

为了完整起见，我认为这应该也适用于此案例：

width: calc(200% / 3);

尚未经过考验。

Answer 5

在您的示例中，您没有定义单位，并且某个元素的宽度不能是无单位的。您需要将宽度转换为像素，百分比或类似单位。

例如：

width: calc(100px / 2) // the result will be pixels
width: calc(100% / 2) // the result will be in percentages
width: calc(100 / 2 * 1px) // the result will be in pixels

有一篇很棒的文章解释了calc（）函数here。