У меня есть jquery accorion id #accordion и часть содержимого внутри заголовка класса .simpleColor. Теперь я хочу дать расчетную маржу .simpleColor. В псевдо... это выглядит примерно так:
.simpleClass {
margin-left: ((#accordion.width/2) - (.simpleColor.width/2));
}
Я открыт для использования любых других технологий, таких как javascript, для достижения этого, если это возможно.
Там есть функция CSS, называемая calc, которая начинает получать довольно хорошую поддержку. Синтаксис работает следующим образом:
width: calc(50% - 100px);
(Обратите внимание, что пробелы вокруг операторов значительны)
Это позволяет использовать истинную динамическую вычислительную поддержку в CSS. С препроцессором вы можете комбинировать только статические длины со статическими длинами и относительные длины с относительными.
Calc поддерживается с Chrome 19, Firefox 4 и IE9. Эта функция недостаточно широко поддерживается, чтобы широко использовать ее, но она будет не слишком далеко в будущем, и это что-то, что нужно запомнить и с нетерпением ждем.
Невозможно выполнять математические операции внутри CSS изначально. Вы можете использовать JavaScript для изменения свойств CSS при загрузке страницы, но это боль, и нужно делать каждую загрузку страницы, делая вашу страницу медленной.
Вам нужно использовать препроцессор CSS, например LESS, Stylus или SASS.
Бонус к использованию любого из этих языков заключается в том, что вы можете генерировать фактические стили CSS-стилей из них. Вы также получаете преимущества, такие как функции, mixins, переменные и т.д.
jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width() / 2) - (jQuery('.simpleColor').width() / 2) + 'px');
Делайте то, что вы хотите. Но вам нужно сделать что-то подобное в javascript, вы не можете сделать это в чистом CSS, если ширина для #accordian и .simpleColor заранее известна (и, следовательно, вычисляется заранее).
Если вы открыты для использования других технологий, попробуйте использовать меньше: http://lesscss.org/
Я считаю, что 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.