我正在使用:
宽度:calc(100% mod 320);
但它总是返回父元素的全宽。
看起来像是支持问题的语法似乎没有问题。
在 chrome 37 和 firefox 32.0 上测试。
这是一个fiddle
<div class="mod">test2</div><!-- it should be 100px -->
.mod{
width:calc(300px mod 200);
}
最佳答案
1) 看起来只有 IE 支持 mod 运算符,它的功能确实如您所想。
2) 您需要在模数的单位上添加px
(如C-link 所述)
3) 正如@Harry 提到的,the current spec已从 calc 函数中删除 mod 运算符
FIDDLE -(在 Internet Explorer 上试试)
示例标记 -
<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(测试用例)
.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;
}
关于html - Css3 计算函数 : issue with mod operator,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25709194/