如何在CSS中执行算术运算？ [英] How to perform arithmetic operations in CSS?

问题描述

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

例如：
两个divs并排，每个宽度为50％，我想给这些div的边框。我想写这样的规则。

  #container {
 width：50％ -  1px; //我知道这不工作。 
} 
  

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

$

解决方案

它已经存在;您可以使用CSS3 calc（）符号：

  div {
背景：橄榄; 
 height：200px; 
 width：200px; 
} 
 
 div> div {
 background：azure; 
 height：calc（100％ -  10px）; 
 width：100px; 
} 
  

http://jsfiddle.net/NejMF/

^{注意：只有现代浏览器（IE9 +），并且最近才被移动浏览器采用。}

I want to know how can I achieve an arithmetic operation in CSS.

For example: I want to align two divs side by side each having width of 50% and I want to give border on these divs. I want to write my rule like this.

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

Why do browsers not support such arithmetic operations in CSS ?

And, How can I get this to work ?

解决方案

It already exists; You can use the CSS3 calc() notation:

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

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

http://jsfiddle.net/NejMF/

^{Note: It's only supported in modern browsers (IE9+) and has only recently been adopted by mobile browsers.}

这篇关于如何在CSS中执行算术运算？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！