css 计算数字除法

Question

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

width: calc(2 / 3);

有没有可行的方法？

我觉得写起来不像0.666666666667那么好。欢迎任何想法。

Answer 1

使用这个：

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

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

Answer 2

需要乘以100才能转换为%

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

<div>yeah</div>

Answer 3

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

如果您想要百分比，则需要将其乘以 100%

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

如果您真的想要以像素为单位的结果，请将其乘以 1px

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

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。

css 计算数字除法

css calc number division

css

multiplication

calc

percentage