Как выполнить арифметические операции в CSS?

Я хочу знать, как я могу выполнить арифметическую операцию в CSS.

Например: Я хочу выровнять два div бок о бок, каждый из которых имеет ширину 50%, и я хочу дать границу этим div. Я хочу написать свое правило следующим образом.

#container {
    width: 50% - 1px; // I know this does not work.
}

Почему браузеры не поддерживают такие арифметические операции в CSS?

И, как я могу заставить это работать?

Ответ 1

Это уже существует; Вы можете использовать обозначение CSS3 calc():

div {
    background: olive;
    height: 200px;
    width: 200px;
}

div > div {
    background: azure;
    height: calc(100% - 10px);
    width: 100px;
}

http://jsfiddle.net/NejMF/

^{Примечание. Он поддерживается только в современных браузерах (IE9 +) и только недавно был принят мобильными браузерами.}

Ответ 2

Используйте box-sizing: border-box; на вашем <div> чтобы сделать границы частью вычисления ширины. Значением по умолчанию для box-sizing является content-box, которое не включает отступы или границу в атрибуте width.

#container {
  border: 1px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
}

Пол Ирриш комментирует использование calc() и предлагает использовать border-box, потому что он лучше соответствует нашей ментальной модели "ширины".

Ответ 3

Это возможно с помощью прекомпилятора CSS. LESS ans Sass очень популярны. Вы можете написать его так, как вы это делали в приведенном выше примере.

http://www.lesscss.org/

LESS более прост в обращении, когда вы являетесь дизайнером. Для программистов и Ruby (на Rails) разработчики Сасс, возможно, лучший выбор.