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

Question

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

例如:我想并排排列两个div,每个div的宽度为50%,我想在这些div上给出边框.我想写这样的规则.

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

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

而且,我怎样才能使这个工作？

Answer 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 +)中受支持,并且最近才被移动浏览器采用.}

Answer 2

使用box-sizing: border-box;你的<div>,让宽度计算的边界部分.box-sizingis 的默认值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() 受所有主流浏览器支持.

保罗爱尔兰的评论对使用box-sizing: border-box;和使用边界框提示,因为它已经支持.

我不建议使用<div>或任何其他CSS3功能,因为它们支持不足.