如何在CSS中执行算术运算？

我想知道如何在CSS中实现算术运算

例如： 我想将两个div并排对齐，每个div的宽度为50%，并在这些div上加上边框。我想这样写我的规则

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

为什么浏览器不支持CSS中的算术运算

还有，我怎样才能让它工作呢；您可以使用CSS3

calc（）

表示法：

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

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

注意：它仅在（IE9+）中受支持，最近才被移动浏览器采用。

在

上使用，使边框成为宽度计算的一部分。

框大小调整的默认值为
内容框
，在
宽度
属性中不包括填充或边框

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

Paul Irish对
calc（）
的使用进行了评论，因为它更符合我们的“宽度”心理模型。
使用CSS预编译器是可能的
LESS
ans
Sass
非常流行。
您可以按照上面示例中的方式编写它


当你是一名设计师时，越少越好。对于程序员和Ruby（on Rails）开发人员来说，Sass可能是更好的选择。
@blunderboy有关浏览器前缀的信息，请参见答案：
calc
is、IE8、Safari“为什么”问题通常是非建设性的。您应该将您的用例作为一个技术问题（并相应地写下标题）进行展示，以寻求解决方案，而不是“只是想知道为什么？”。谢谢@JukkaK.Korpela将从下次开始关注。