Tengo jquery accorion id #accordion y parte del contenido dentro del nombre de la clase de encabezado .simpleColor. Ahora quiero dar un margen calculado a .simpleColor. En seudo ... se ve algo como esto,¿Es posible hacer matemáticas dentro de CSS?
.simpleClass {
margin-left: ((#accordion.width/2) - (.simpleColor.width/2));
}
Estoy abierto a utilizar cualquier otra tecnología, como Javascript para lograr esto si es posible.
Hay una función llamada CSS calc que está empezando a ser bastante buen apoyo. La sintaxis funciona como sigue:
width: calc(50% - 100px);
(Tenga en cuenta que el espacio en blanco alrededor de los operadores es significativo)
Esto permite cierto soporte computacional dinámico en CSS. Con un preprocesador, solo puede combinar longitudes estáticas con longitudes estáticas y longitudes relativas con relativas.
Calc es compatible desde Chrome 19, Firefox 4 e IE9. La función no es lo suficientemente compatible como para usarla ampliamente, pero no será demasiado lejos en el futuro y es algo para recordar y esperar.
Funciona perfectamente en Chrome, Firefox e IE como mencionaste en Win7 y 8. ¡Gracias! Obtención de relleno y un div 100% ancho ha sido un dolor, y el uso de JavaScript para algo tan simple parecía un desperdicio. ¡Esto es mucho mejor! –
Es posible que también desee examinar ['box-sizing: border-box;'] (http://www.paulirish.com/2012/box-sizing-border-box-ftw/). Eso hace que el relleno resta del ancho en lugar de agregarlo, y tiene mejor soporte que calc, vuelve a IE8, y tiene un [polyfill disponible para IE6/7] (https://github.com/Schepp/box-sizing- polyfill) si se necesita ayuda. IE8 todavía tiene una cuota de mercado considerable, por lo que recomiendo usar 'box-sizing' para sus necesidades. – TimE
Has hecho el tick :) gracias –
Si usted está abierto a la utilización de otra tecnología, trate de usar menos: http://lesscss.org/
Spot on! gracias Michael – doNotCheckMyBlog
jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width()/2) - (jQuery('.simpleColor').width()/2) + 'px');
debe hacer lo que usted está deseando. Pero necesita hacer algo como esto en javascript, no puede hacerlo en CSS puro a menos que los anchos para #accordian y .simpleColor se conozcan de antemano (y, por lo tanto, se calculen con anticipación).
No es posible realizar operaciones matemáticas dentro de CSS de forma nativa. Podría usar JavaScript para cambiar las propiedades de CSS en la carga de la página, pero esto es un problema y se debe hacer cada carga de página haciendo que su página sea lenta.
Deberá usar un preprocesador CSS como LESS, Stylus o SASS.
La ventaja de utilizar cualquiera de estos lenguajes es que puede generar hojas de estilo CSS reales a partir de ellos. También obtienes beneficios como funciones, mixins, variables y más.
Spot on, obtuve lo que necesitaba, pero me gustaría aceptar la respuesta de Michael como señaló primero :) gracias por cierto – doNotCheckMyBlog
Creo que el CSS debe ser una definición de estilo puro. No me gusta mezclar algunos cálculos con eso. Me gustaría hacer eso 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/
en lugar de parseInt ($ ("# acordeón"). css ("ancho"). replace ("px", "")) puede usar $ ("# accordion"). width() para obtener el valor entero. –
Vea este ejemplo .. Ha usado mucha matemática en css.
Ten en cuenta que [las respuestas solo de enlace] (http://meta.stackoverflow.com/tags/link-only-answers/info) están desaconsejadas, SO las respuestas deberían ser el punto final de una búsqueda de una solución (frente a otra escala de referencias, que tienden a quedar obsoletas en el tiempo). Considere agregar una sinopsis independiente aquí, manteniendo el enlace como referencia. – kleopatra
¡Hola! ¡Eso es SCSS! no CSS El compilador calculará el compañero –
Parece que quiere centrar algo horizontalmente. ¿Has probado 'margin: 0 auto;'? – Ryan
¿Has oído hablar de [calc()] (http://www.w3.org/TR/css3-values/#calc0) – Musa
No, nunca ... parece útil – doNotCheckMyBlog