Css3 calc函數：mod運算符的問題

Question

我正在使用：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);
}

Answer 1

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>

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;
}

Answer 2

25％mod 2（25％的剩余部分除以2）

有用的鏈接，學習使用此功能。 如何在CSS3中使用Calc函數

CSS

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

DEMO