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

Question

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

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

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

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

还有，我怎样才能让它发挥作用？

Answer 1

已经exists ;您可以使用 CSS3 calc() 表示法:

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

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

http://jsfiddle.net/NejMF/

^{注意:它仅在 modern browsers 中受支持(IE9+)，并且最近才被移动浏览器采用。}