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

前端之家收集整理的这篇文章主要介绍了如何在CSS中执行算术运算?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道如何在CSS中实现算术运算。

例如:
我想对齐两个div,每个宽度为50%,我想给这些div的边框。我想写这样的规则。

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

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

而且,我如何让这个工作?

解决方法

已经 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)中支持,并且最近才被移动浏览器采用。

猜你在找的CSS相关文章