在 calc 函数中使用宽度

Question

我想要做这样的事情：

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

我想把宽度改为90像素，然后希望边距相应地增加。
但这样不起作用。这是否可能实现？

- Naor

---

你应该使用CSS替代方案或JavaScript（jQuery）。 - Pieter

尝试使用SASS或LESS。 - Ennui

@Ennui：SASS / LESS / STYLUS / ... 不要在运行时更改CSS！ - Naor

那就用JS吧。calc()的浏览器支持性不太好，所以它并不是非常可靠（http://caniuse.com/#feat=calc）。使用JS更安全。 - Ennui

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（JSFiddle）

http://jsfiddle.net/uqE8b/

如果你检查 <p> 元素，你会发现它认为代码是有效的，但它什么也没做……所以目前似乎你必须使用 JavaScript、LESS 或任何等效的东西，因为它仍然是一个实验性功能。

编辑：

当你将变量设置为普通数字时，它确实可以工作：

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/

- koningdavid

Answer 2

你无法使用标准CSS做到这样的事情，你应该探索一些替代方案，比如LESS

编辑：我错了，如果你在calc()函数中使用var()，CSS3是支持这个功能的：

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

我认为应该这样做。

- NibblyPig

---

你还应该声明变量，例如 var-width: 100px; - koningdavid

我也无法让它工作，我从一些教程中获取了它，可能是因为我的浏览器不支持它。如果是这种情况，请尝试使用LESS或类似的东西。 - NibblyPig

LESS 不会在运行时更改 CSS，只会在“编译”时进行修改。 - Naor

LESS是动态CSS，不需要编译。你可能在想SASS。 - NibblyPig

Less和Sass都可以在浏览器中进行编译和动态解释。 - UselesssCat

Answer 3

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

试试这样做，对我非常有效。

- gr8ravi