¿Es posible hacer matemáticas dentro de CSS?

Tengo jquery accorion id #accordion y parte del contenido dentro de header class name .simpleColor. Ahora quiero dar un margen calculado a .Color simple. En pseudo...it se ve algo como esto, 

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

Estoy abierto a usar cualquier otra tecnología como javascript para lograr esto si es posible.

Author: TeaCupApp, 2012-04-30
Source

6 answers

Hay una función CSS llamada calc que está empezando a obtener bastante buen soporte. La sintaxis funciona de la siguiente manera:

width: calc(50% - 100px);

(Tenga en cuenta que el espacio en blanco alrededor de los operadores es significativo)

Esto permite un verdadero soporte computacional dinámico en CSS. Con un preprocesador, solo puede combinar longitudes estáticas con longitudes estáticas y longitudes relativas con longitudes relativas.

Calc es compatible desde Chrome 19, Firefox 4, y IE9. La característica no es muy amplia soportado lo suficiente como para usarlo ampliamente, pero no estará demasiado lejos en el futuro y es algo para recordar y esperar.

 67
Author: TimE,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-29 03:26:08

No es posible realizar operaciones matemáticas dentro de CSS de forma nativa. Puede usar JavaScript para cambiar las propiedades CSS al cargar la página, pero esto es un dolor y debe hacerse cada carga de la página haciendo que su página sea lenta.

Necesitarás usar un preprocesador CSS como MENOS, Stylus , o SASS.

La ventaja de usar cualquiera de estos lenguajes es que puede generar hojas de estilo CSS reales a partir de ellos. También obtiene beneficios como funciones, mixins, variable, y mas.

 8
Author: Stanley Stuart,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-30 04:07:10 
jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width() / 2) - (jQuery('.simpleColor').width() / 2) + 'px');

Debe hacer lo que usted quiere. Pero necesitas hacer algo como esto en javascript, no puedes hacerlo en CSS puro a menos que los anchos para # accordian y .simpleColor se conocen de antemano (y por lo tanto se calculan de antemano).

 3
Author: Jared Kipe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-30 04:00:58

Vea este Ejemplo.. Ha usado muchas matemáticas en css.

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

 2
Author: Sanu Uthaiah Bollera,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-28 07:50:26

Si está dispuesto a usar otra tecnología, intente usar less: http://lesscss.org /

 1
Author: Michael Silveira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-30 03:57:32

Creo que el CSS debe ser definición de estilo puro. No me gusta mezclar algunos cálculos con eso. Lo haría en mi 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);

Muestra de trabajo http://jsfiddle.net/mzTRw/19 /

 1
Author: Shyju,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-30 04:08:06