在calc中使用宽度

Question

我正在尝试做这样的事情：

.my-style {
    width: 50px;
    margin-left: calc(50% - calc(width / 2));
}

后来我将宽度更改为90px，我希望保证金相应增长 它不起作用。有可能吗？

Answer 1

最新的浏览器应该支持它，我尝试了以下代码。

这是我制作的webkit示例，因此请在chrome

中查看

<强> CSS

p {      
      -webkit-var-a: -webkit-calc(1px + 3px);
      margin-left:-webkit-calc(-webkit-var(a) + 5px);
}

<强> HTML

<p>This text should have margin-left, but it doesn't</p>

<强> FIDDLE

http://jsfiddle.net/uqE8b/

如果您检查<p>元素，您可以看到它看到代码是有效的，它只是没有做任何事情......所以看来现在你必须使用javascript，LESS或任何东西因为它仍然是一个实验性的特征。

修改

当你将var设为普通数字时， DOES 似乎有效：

p {      
      -webkit-var-a: 3px;
      margin-left:-webkit-calc(-webkit-var(a) + 5px);
}

http://jsfiddle.net/uqE8b/1/

所以回答你的问题，是的，这是可能的，但我现在暂不推荐。

<强> CSS

.my-style {
    height:100px;
    background-color:black;
    -webkit-var-width: 50px;
    margin-left: -webkit-calc(50% - -webkit-var(width) / 2);
}

<强> FIDDLE

http://jsfiddle.net/ShsmX/

Answer 2

您不能使用标准CSS做类似的事情，您应该调查一个替代方案，例如LESS

编辑：我错了，如果在calc（）中使用var（），CSS3支持这个：

.my-style {
    width: 50px;
    margin-left: calc(50% - (var(width) / 2));
}

我认为应该这样做。

Answer 3

.my-style {
    width: 50px;
    margin-left: calc(100% - calc(width / 2));
}

尝试这样，对我来说很奇怪。