Question

我有jquery accorion标识#accordion以及标题类名.simpleColor内的一些内容。现在我想给.simpleColor一个计算余量。在伪......它看起来像这样，

.simpleClass {
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2));
}

我愿意使用任何其他技术（例如javascript）来实现这一目标。

Answer 1

有一个名为calc的CSS函数开始得到很好的支持。语法如下：

width: calc(50% - 100px);

（请注意，运算符周围的空格很重要）

这允许CSS中的真正动态计算支持。使用预处理器，您只能将静态长度与静态长度相结合，相对长度与相对长度相结合。

自Chrome 19，Firefox 4和IE9以来，

支持Calc。该功能的使用范围还不够广泛，但未来也不会太远，需要记住和期待。

Answer 2

无法在CSS内部进行数学运算。您可以使用JavaScript在页面加载时更改CSS属性，但这很麻烦，必须在每个页面加载时使页面变慢。

您需要使用CSS预处理器，例如LESS，Stylus或SASS。

使用这两种语言的好处是可以从中生成实际的CSS样式表。您还可以获得诸如函数，mixins，变量等优点。

Answer 3

jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width() / 2) - (jQuery('.simpleColor').width() / 2) + 'px');

应该做你想要的。但你需要在javascript中做这样的事情，你不能在纯CSS中做到这一点，除非#accordian和.simpleColor的宽度事先知道（并因此提前计算）。

Answer 4

参见此示例..他在css中使用了很多数学。

http://codepen.io/schoenwaldnils/pen/DLiyr

Answer 5

您可以在CSS中进行数学运算，例如：

height: calc(100% - 20%);

CSS还将处理不同的单元，因此它也可以工作：

height: calc(100% - 20px);

另外，还添加了min()，max()和clamp()，以便进行如下计算：

height: min(calc(100% - 20px), 50%);

min（）：获取最小值；
max（）：获取最大值；和
clamp（）：通过提供上限和下限来限制值。

Answer 6

如果您愿意使用其他技术，请尝试使用less：http://lesscss.org/

Answer 7

我相信CSS应该是纯粹的样式定义。我不喜欢将一些计算与之混合。我会在我的javascript

中这样做

var accWidth=parseInt($("#accordion").css("width").replace("px",""));
var simpWidth=parseInt($(".simpleColor").css("width").replace("px",""));
var marginLeft=((accWidth/2)-(simpWidth/2));       
$(".simpleClass").css("margin-left",marginLeft);

工作样本http://jsfiddle.net/mzTRw/19/

是否可以在CSS中进行数学运算？

7 个答案: