CSS - 我可以在 Calc() 中使用对象的宽度吗？

Posted 2023-03-07

【中文标题】CSS - 我可以在 Calc() 中使用对象的宽度吗？

【英文标题】：CSS - Can I use an object's Width in Calc()?

【发布时间】：2018-10-17 21:26:37

【问题描述】：

我想要这样的东西：

height: calc(width + 5px);

这只是一个小例子，但我最终正在寻找一种将设置宽度用作计算的一部分的方法，而不是一种更简单的解决示例的方法。我所做的任何搜索都只是举例说明如何使用calc() 设置宽度。谢谢！

【问题讨论】：

也许看看 javascript 或某种 CSS 预处理器。或者只是在你的 CSS 中使用相同的宽度值...

【参考方案1】：

最接近纯 CSS 的方法是将 CSS 变量与 calc 结合起来

:root 
	--width: 100px;

div 
	border: 1px solid red;
	height: calc(var(--width) + 5px);
	width: var(--width);

<div>
test
</div>

这将让您定义一个 CSS 变量 --width 并使用它来计算 div 的新高度。