css 计算除法

Posted 2023-03-06

【中文标题】css 计算除法

【英文标题】：css calc number division

【发布时间】：2017-12-02 00:43:15

【问题描述】：

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

width: calc(2 / 3);

有没有办法解决这个问题？

我不认为它看起来像0.666666666667 这样写得很好。欢迎任何想法。

【问题讨论】：

您可能需要使用 CSS 预处理器。

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

我尝试使用 less,css-precompilers 并且效果很好。它会自动给出计算值 div#header width: calc(2 / 3); 编译为 div#header width: calc(0.6666666666666666); 在这里试试winless.org/online-less-compiler

带有预处理器的输出仍然是一个四舍五入的数字。我将采用其他解决方案之一。还是谢谢。

【参考方案1】：

使用这个：

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

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

【参考方案2】：

你需要乘以100才能转换成%

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

<div>yeah</div>

【参考方案3】：

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

如果你想要这个百分比，你需要将它乘以 100%

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

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

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

【讨论】：

很好的答案！然后要添加一个单位，我们需要将它乘以 1 和单位后缀。因为 100% 与 1 相同，所以我们乘以 100 而不是 1。

【参考方案4】：

为了完整起见，我认为这也应该适用，仅适用于这种情况：

width: calc(200% / 3);

尚未经过测试。

【参考方案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。