Css3计算功能：与mod运算符的问题 [英] Css3 calc function : issue with mod operator

问题描述

我正在使用：
width：calc（100％mod 320）;

，但它总是返回父元素的全部宽度。
看起来没有什么问题，它看起来像一个支持问题。
在chrome 37和firefox 32.0上测试。
这里是小提琴

 < div class =mod> test2< / div><！ - 它应该是100px  - > 
 .mod {
 width：calc（300px mod 200）; 
 
  

解决方案

1） IE支持mod运算符，它的功能与您想象的一样。

2）您需要在

上添加 px 模数单位（如提到的C-link）

3）正如@Harry所提到的，当前规范已经将calc运算符从calc函数中删除了

< a href =http://jsfiddle.net/p5nwqgob/5/ =nofollow> FIDDLE - （在Internet Explorer中试用）

样本标记 -

 < div class =container> 
< div class =no> no calc< / div> 
< div class =simple>简单< / div> 
< div class =mod1> mod1< / div> 
< div class =mod2> mod2< / div> 
< div class =mod3> mod3< / div> 
< div class =mod4> mod4< / div> 
< / div> 
  

CSS（测试用例）

  .container {
 width：450px; 
 border：1px纯黑色; 
} 
 .no {
 background：aqua; 
} 
 .simple {
 width：calc（100％ -  100px）; 
背景：绿色; 
} 
 .mod1 {
 width：calc（100％mod 200px）; / * = 450％2​​00 = 50px * / 
 background：red; 
} 
 .mod2 {
 width：calc（100％mod 300px）; / * = 450％300 = 150px * / 
 background：brown; 
} 
 .mod3 {
 width：calc（100％mod 50px）; / * = 450％50 = 0 * / 
 background：orange; 
} 
 .mod4 {
 width：calc（50％mod 100px）; / * = 225％100 = 25px * / 
 background：yellow; 
} 
  

I'm using : width:calc(100% mod 320);
but it always returns the full width of the parent element. Seemingly nothing's wrong with the syntax it looks like a support issue. Tested on chrome 37 and firefox 32.0. Here is a fiddle

<div class="mod">test2</div><!-- it should be 100px -->
.mod{
    width:calc(300px mod 200);
}

解决方案

1) It looks like only IE supports the mod operator and it does function as you thought.

2) You need to add px on the units of the modulo (as C-link mentioned)

3) As @Harry mentioned, the current spec has dropped the mod operator from the calc function

FIDDLE - (try it on Internet explorer)

Sample markup -

<div class="container">
    <div class="no">no calc</div>
    <div class="simple">simple</div>
    <div class="mod1">mod1</div>
    <div class="mod2">mod2</div>
    <div class="mod3">mod3</div>
    <div class="mod4">mod4</div>
</div>

CSS (test cases)

.container {
    width: 450px;
    border: 1px solid black;
}
.no {
   background:aqua; 
}
.simple {
    width:calc(100% - 100px);
    background:green;
}
.mod1 {
    width:calc(100% mod 200px); /* = 450 % 200 = 50px */
    background:red;
}
.mod2 {
    width:calc(100% mod 300px); /* = 450 % 300 = 150px */
    background:brown;
}
.mod3 {
    width:calc(100% mod 50px); /* = 450 % 50 = 0 */
    background:orange;
}
.mod4 {
    width:calc(50% mod 100px); /* = 225 % 100 = 25px */
    background:yellow;
}

这篇关于Css3计算功能：与mod运算符的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！