3

我正在使用：宽度：计算（100% mod 320）；
但它总是返回父元素的全宽。语法似乎没有任何问题，它看起来像是一个支持问题。在 chrome 37 和 firefox 32.0 上测试。这是一个小提琴

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

2 回答 2

2

1) 看起来只有 IE 支持 mod 操作符，它的功能和你想象的一样。

2）您需要添加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>

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;
}
于 2014-09-07T11:02:00.437 回答
-2

25% mod 2（25% 的余数除以 2）

对您有用的链接，学习使用此功能。如何在 CSS3 中使用 Calc 函数

CSS

.mod{
    width: calc(300px - ((300px / 200) * 200));
    background:red;
}

演示

于 2014-09-07T10:30:56.437 回答