计算宽度从百分比到像素然后减去像素在较少的 CSS

我将计算一些元素的宽度从百分比到像素，所以我将使用 更少和 Calc ()负10像素。有可能吗？

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

我使用的是 CSS3calc()，所以它不工作: calc(100% - 10px)

例如: if 100% = 500px so width = 490px (500-10) ;

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

所以当我调整大小时，填充会一直显示: 5(10px/2)。

我可以用 更少吗？我知道如何做在 jQuery 和简单的 CSS，如边距填充或其他... 但我会尝试在 更少与 calc()的功能

121195 次浏览
小开

Or, you could use the margin attribute like this:

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

I think width: -moz-calc(25% - 1em); is what you are looking for. And you may want to give this Link a look for any further assistance

小开
最佳答案

You can escape the calc arguments in order to prevent them from being evaluated on compilation.

Using your example, you would simply surround the arguments, like this: 

calc(~'100% - 10px')

Demo : http://jsfiddle.net/c5aq20b6/

I find that I use this in one of the following three ways:

Basic Escaping

Everything inside the calc arguments is defined as a string, and is totally static until it's evaluated by the client:

LESS Input

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

CSS Output

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

Interpolation of Variables

You can insert a LESS variable into the string:

LESS Input

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

CSS Output

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

Mixing Escaped and Compiled Values

You may want to escape a percentage value, but go ahead and evaluate something on compilation:

LESS Input

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

CSS Output

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

Source: http://lesscss.org/functions/#string-functions-escape.

小开

Try this :

width:auto;
margin-right:50px;

提交答案