Question

我想要在width中增加一个元素，因为它的父级在width中减少

等式应该类似于：

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

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

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

修改我添加了空格（没有意识到这一点）。尝试过各种各样的单位，但没有运气。

Fiddle

<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 - ＆gt; 150 + 1 = 151

父是100px

150 + 500/100 - ＆gt; 150 + 5 = 155

父母是20px

150 + 500/20 - ＆gt; 150 + 100 = 250

Answer 1

calc()需要操作符之间的空格（但只在+和-中），但您缺少单位，可能是px，{{1} }，em等等......这样的事情会是这样的：

rem

这是无效的，因为正如@TylerH所解释的那样，你不能除以未编辑的值（width:calc(150px + (500px / 100%))，px等）。

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

很难知道，因为在你的问题中没有太多东西可以看，但仍然无效，但我猜你正在寻找这样的东西：

鉴于您编辑的问题AFAIK，您必须使用JS来实现这一目标，除非您能提供小提琴。

Answer 2

您似乎已经找到了解决方案，但我会特别回答为什么原始代码无效

我将从calc（）中的产品方程（当你除法）的语法开始：


<calc-product> = <calc-value> [＆＃39; *＆＃39; <calc-value> | ＆＃39; /＆＃39; <number>]

calc（）属性语法的spec比听起来要复杂一些。当你在这里进行calc（）分割时，右边必须是number。你不能使用＆＃34; unit-ed＆＃34;值：


数字值由<number>表示，表示实数，可能包含小数部分。

当按字面意思书写时，数字可以是整数，也可以是零或更多的十进制数字，后跟一个点（。）后跟一个或多个十进制数字，还可以选择一个由＆＃34; e＆＃34;组成的指数。或＆＃34; E＆＃34;和整数。它对应于CSS Syntax Module中的生产。与整数一样，数字的第一个字符可以紧跟在 - 或+之前，以表示数字的符号。

也就是说，您不能将除以百分比值（例如100％）。

Answer 3

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

width:calc(650px - 100%);

随着父级变窄而变宽。

Updated fiddle

反向宽度的CSS calc（）不起作用

3 个答案: