css calc number division

Question

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

width: calc(2 / 3);

这有什么办法吗？

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

Answer 1

问题在于ConfigurationManager你只会得到一个没有单位的数字。 CSS不能只显示一个数字作为宽度。这就像你设置显然不起作用的calc(2 / 3)一样。

如果你想要百分比，你需要100％

width: 3

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

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

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。