标签: css-calc

我想inherit用calc()这样的:

#foo {
  animation-duration: 10s;
}
#foo > .bar {
  animation-duration: calc(inherit + 2s); /* =12s */
}

但它似乎没有用.

是浏览器错误还是规格？

如何在另一个CSS calc函数中使用CSS calc函数？根据这篇文章,它是可能的,但没有这方面的例子.

是否可以使用calc()乘以或除以基于单位的值(如100%,5px等).

例如,我希望做这样的事情:

width: calc(100% * (.7 - 120px / 100%));

希望它解决类似的问题(假设100%= 500px):

width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);

然而,在经过一些实验之后,看起来我不能将基于单位的价值作为分裂的分母.

我也似乎并不能够多两个值在一起像5px * 10px或5px * 100%.

我知道在100%的情况下允许这样做没有意义,但在我的用例中,我想知道120px的总宽度是多少百分比,然后我将其输入到我的其余部分.计算.

要么就是这样,或者如果有人能想出一种不同的方式来编写它,那么它也会起作用.我绞尽脑汁,无法想出任何东西.

calc()在JavaScript中设置位置时我可以使用css 函数吗？

ePopup.style.top = "calc(100px - 1.5em)";

希望这很简单.我想使用CSS calc操作来执行两个计算:

我想将我的宽度设置为相当于

(100% / 7) - 2

但是,如果我尝试在CSS计算操作中执行多个操作,则会失败:

width: calc((100% / 7) - 2);

如何在一个CSS语句中执行多个calc操作？

我正在尝试使用固定宽度tds和可变宽度tds 的表格.

我使用CSS calc()功能,但不知何故,似乎我不能%在表中使用.

这就是我到目前为止所拥有的:

<table border="0" style="width:100%;border-collapse:collapse;">
    <tr style="width:100%">
        <td style="width:30px;">1</td> <!--Fixed width-->
        <td style="width: calc( (100% - 230px) / 100 * 40);">Title</td> <!--Width should be 40% of the remaining space-->
        <td style="width: calc( (100% - 230px) / 100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space-->
        <td style="width: calc( (100% - 230px) / 100 * 20);">Album</td> <!--Width should be 20% of the remaining space-->
        <td style="width:80px;">Year</td><!--Fixed width-->
        <td style="width:180px;">YouTube</td><!--Fixed …

我尝试calc()使用jQuery animate 设置CSS ,例如:

$element.animate({
    height: 'calc(100% - 30px)'
}, 500);

而且我注意到它calc()不适用于jQuery动画......

我希望有一种方法可以做到这一点,我不希望以类似的方式去做,替代或解决方法,我想设置calc()

这不可能吗？以任何方式？

如果有可能,请告诉我们如何？

是否可以calc()在CSS函数内部使用transform或translate？我似乎无法让它工作.这是一个演示,所以你们可以玩:

http://jsfiddle.net/qdJwY/1/

在研究之后,我确认calc应该适用于ie8 +,但它对我不起作用.

这是我制作的JS小提琴:

http://jsfiddle.net/75tzyLoo/

这是代码:HTML:

<div id="outer">
    <div id="inner">

    </div>
</div>

CSS:

#outer{
    width:400px;
    background-color:black;
    height:200px;
}
#inner{
    width:calc(80%-100px);
    width:expression(80%-100px);
    background-color:red;
    height:100%;

}

这是我看到的输出:

我究竟做错了什么？

有没有办法在css calc函数中使用或实现模运算符？
我知道有mod运算符和IE支持它,但其他浏览器呢？

例如

#element-id{
     width: calc( 100%  mod 5 );
}