从百分比到像素计算宽度，然后在较少的CSS中减去像素
从百分比到像素计算宽度，然后在较少的CSS中减去像素
提问于 2013-02-11 22:55:00
我将计算一些元素中的宽度，从百分比到像素，所以我将通过使用减和calc()来减去-10px。有可能吗？
div {
span {
width:calc(100% - 10px);
}
}我使用CSS3 calc()，所以它无法工作：calc(100% - 10px)
宽度示例： if 100% = 500px so = 490px (500-10)；
我制作了一个用于测试的演示：http://jsfiddle.net/4DujZ/55/
所以当我调整大小时，padding会一直显示：5 (10px / 2)。
我可以在LESS中完成吗？我知道如何在jQuery和简单的CSS，如边距填充或其他…但我将尝试使用calc()在LESS中实现函数式功能
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-06-01 13:54:24
您可以对calc参数进行转义，以防止它们在编译时被计算。
使用您的示例，您可以简单地将参数括起来，如下所示：
calc(~'100% - 10px')演示：http://jsfiddle.net/c5aq20b6/
我发现我通过以下三种方式之一来使用它：
基本转义
calc参数中的所有内容都被定义为字符串，并且在客户端对其求值之前是完全静态的：
更少的输入
div {
> span {
width: calc(~'100% - 10px');
}
}CSS输出
div > span {
width: calc(100% - 10px);
}变量的插值
您可以在字符串中插入一个较小的变量：
更少的输入
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);
}Stack Overflow用户
发布于 2013-02-12 01:57:56
我想width: -moz-calc(25% - 1em);就是你要找的。您可能希望查看此Link以获得任何进一步的帮助
Stack Overflow用户
发布于 2013-02-11 22:59:56
或者，您可以使用类似于下面这样的空白区属性：
{
background:#222;
width:100%;
height:100px;
margin-left: 10px;
margin-right: 10px;
display:block;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14814616
复制相关文章
相似问题
腾讯云开发者
