css - css 变量中的计算不起作用

标签 css

<分区>

我在css中写了下面的代码。第一行的目的是根据屏幕宽度计算一行中可以容纳的对象数量，第二行使用计算出的数量来计算这些对象的宽度。

:root{
--linkCount: calc(100vw / 200px);
--linkwidth: calc(230px + (100vw - 60px - (var(--linkCount) * (230px + 6px))) / var(--linkCount));
}

问题是第一个计算 calc(100vw/200px); 不工作。当我在网站上运行这段代码时，对象根据内容具有尽可能小的宽度(所以基本上 width:auto;)当我用例如替换它时calc(5); 或 5; 它有效。我已经尝试删除或添加间距，但没有成功。

这里是一段代码。这两个变量放在:root https://jsfiddle.net/josvm9dw/

谁能向我解释为什么它不起作用，因为我不明白。

最佳答案

vw 不能除以 px，它们是不同的度量单位。仅除以绝对数:

--linkCount: calc(100vw / 200);

使用 200 或您需要的任何数量。

关于css - css 变量中的计算不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59428427/