4

我有一个元素想要增加，width因为它的父元素减少了width

方程应该类似于：

width:calc(150 + 500 / 100%);

但至少在 Chrome 中，每当我尝试除以百分比宽度时，它都会说该属性无效。

这可能吗？（替代方案calc()是可以接受的）

编辑 我添加了空格（没有意识到这一点）。用各种单位尝试过，还没有运气。

小提琴

<div style="width:100%;position:relative;">
    <div style="width:calc(150px + (500 / 100%));position:absolute;top:0;left:0;">This one should get bigger as the page gets smaller</div>
</div>

思考过程：

固定宽度 (150px) 加上 500 除以当前父宽度。

所以如果父母是500px：

150 + 500/500 -> 150 + 1 = 151

父级为 100px

150 + 500/100 -> 150 + 5 = 155

父级为 20px

150 + 500/20 -> 150 + 100 = 250

4

3 回答 3

4

解决方案如此简单，令人难以置信。将 500px 移动到第一部分并减去宽度。

width:calc(650px - 100%);

随着其父代变窄而变宽。

更新的小提琴

于 2016-06-16T18:44:37.663 回答
3

calc()运算符之间需要空格（但只是在+and中-），但是您缺少单位，可能是px,em等rem...，所以会是这样的：

width:calc(150px + (500px / 100%))

这将是无效的，因为正如@TylerH 所解释的那样，您不能除以 un-ed 值（px，，%等）。

但是如果可能的话，当你除以 100% 时，你乘以 1，所以基本上你会保持不变，因为 1 是乘法的中性值，所以这样做是没有用的。

几乎不知道，因为在您的问题中没有什么可看的，而且仍然无效，但我猜您正在寻找这样的东西：

width:calc(150px + (100% / 500px))

鉴于您已编辑的问题 AFAIK，您必须使用 JS 来实现这一点，除非您可以提供 Fiddle。

于 2016-06-16T18:07:33.400 回答
3

似乎您已经找到了解决方案，但我会具体回答为什么您的原始代码不起作用：

我将从 calc() 中的乘积方程（除法时）的语法开始：

<calc-product>= <calc-value>[' *' <calc-value>| ' /' <number>]

calc() 属性语法的规范比听起来要复杂一些。当你在这里做的 calc() 中除法时，右边必须是一个number。您不能使用“unit-ed”值：

数值用 表示<number>，表示实数，可能带有小数部分。

从字面上看，一个数字是一个整数，或者是零个或多个十进制数字，后跟一个点 (.)，后跟一个或多个十进制数字，还可以选择由“e”或“E”和一个整数组成的指数。它对应于CSS Syntax Module中的产生式。与整数一样，数字的第一个字符前面可以紧跟 - 或 + 以表示数字的符号。

也就是说，您不能将某物除以100 % 之类的百分比值。

于 2016-06-16T18:54:32.367 回答