是否有可能在CSS里面做数学？ [英] Is it possible to do mathematics inside CSS?

问题描述

我有jquery accorion id #accordion 和标题类名 .simpleColor 内的一些内容。现在我想给.simpleColor一个计算的保证金。在伪...看起来像这样，

I have jquery accorion id #accordion and some of the content inside header class name .simpleColor. Now I want to give a calculated margin to .simpleColor. In pseudo...it looks something like this,

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

我可以使用任何其他技术是可能的。

I am open to use any other technology such as javascript to achieve this if it is possible.

推荐答案

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

There's a CSS function called calc that is starting to get pretty good support. The syntax works as followed:

width: calc(50% - 100px);

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

(Note that the whitespace around the operators is significant)

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

This allows true dynamic computational support in CSS. With a preprocessor, you can only combine static lengths with static lengths, and relative lengths with relative ones.

自Chrome 19，Firefox 4和IE9开始支持Calc。这个功能没有得到足够广泛的支持，不能广泛使用，但它不会太遥远的未来，它是值得记住和期待的东西。

Calc is supported since Chrome 19, Firefox 4, and IE9. The feature isn't quite widely supported enough to use it widely, but it will be not too far into the future and it's something to remember and look forward to.

这篇关于是否有可能在CSS里面做数学？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！