从百分比计算宽度为像素，然后减去像素LESS CSS(Calculating width from

我将在从百分之一些元件计算宽度为像素，所以我将减去经由使用LESS和calc -10px（）。 这是可能的？

div {
    span {
        width:calc(100% - 10px);
    }
}

我使用CSS3 calc()所以它不工作： calc(100% - 10px)

例如：如果100％= 500像素，从而宽度= 490px（500-10）;

我做了测试演示： http://jsfiddle.net/4DujZ/55/

所以填充会说：5（10px的/ 2）当我调整所有的时间。

我能做到这一点的少吗？ 我知道如何在jQuery和简单的CSS像保证金填充或做别的......但我会努力做到功能在更短的有calc()

Answer 1:

你可以逃脱calc ，以防止他们在编纂被评价参数。

使用你的榜样，你会简单地围绕着争论，就像这样：

calc(~'100% - 10px')

演示： http://jsfiddle.net/c5aq20b6/

---

我发现我在以下三种方式之一使用：

基本逃逸

里面的一切calc参数被定义为一个字符串，直到它的客户端计算是完全静态的：

投入少

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

CSS输出

div > span {
  width: calc(100% - 10px);
}

变量的插值

您可以将LESS变量到字符串：

投入少

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

CSS输出

div > span {
  width: calc(100% - 10px);
}

混合逃脱，编译值

你可能想逃跑的百分比值，而是继续和评估汇编的东西：

投入少

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

CSS输出

div > span {
  width: calc((100% - 10px) - 80px);
}

来源： http://lesscss.org/functions/#string-functions-escape 。

Answer 2:

我认为width: -moz-calc(25% - 1em); 是你在找什么。 你可能想给这个链接看任何进一步的援助

Answer 3:

或者，你可以使用这样的容限属性：

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

Answer 4:

试试这个 ：

width:auto;
margin-right:50px;

文章来源: Calculating width from percent to pixel then minus by pixel in LESS CSS