html - 在 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>

小提琴

http://jsfiddle.net/uqE8b/

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

编辑：

当您将 var 设为纯数字时，它似乎确实有效：

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);
}

小提琴

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));
}

像这样尝试，它对我来说很神奇。