[英]Css3 calc function : issue with mod operator
我正在使用:width:calc(100%mod 320);
但它总是返回父元素的整个宽度。 看似没有什么问题的语法看起来像支持问题。 在chrome 37和firefox 32.0上测试过。 这是一个小提琴
<div class="mod">test2</div><!-- it should be 100px -->
.mod{
width:calc(300px mod 200);
}
1)看起来只有IE支持mod运算符,它确实可以正常运行。
2)你需要在modulo的单位上添加px
(如提到的C-link)
3)正如@Harry所提到的, 当前的规范已经从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>
.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;
}
25%mod 2(25%的剩余部分除以2)
有用的链接,学习使用此功能。 如何在CSS3中使用Calc函数
CSS
.mod{
width: calc(300px - ((300px / 200) * 200));
background:red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.