2

是否可以在一行 CSS 代码中使用多个单位？例如：

width: 20% + 5px;

我假设不是。如果是这样，您如何使用 javascript 等语言进行操作？

4

2 回答 2

4

正如 Sirko 指出的那样，有calc(). 不幸的是，使用该功能有一个问题：主流浏览器IE <9 和 Opera 不支持它。

如果您想要的只是包含一个填充，那么您可以通过设置为具有更好浏览器支持的box-sizing属性border-box来实现相同的效果。对于 IE<8，还有一个polyfill可用。

.span20 {
    -moz-box-sizing: border-box;
         box-sizing: border-box;

    width: 20%;
    padding: 5px;
    float: left;
}

这是一个演示上述内容的jsfiddle 。

于 2013-05-27T19:32:28.047 回答
2

可以使用 CSS calc()：

width: -webkit-calc(20% + 5px);
width:    -moz-calc(20% + 5px);
width:         calc(20% + 5px);

浏览器支持

于 2013-05-27T19:19:37.080 回答