39

我有 jquery accorion id#accordion和 header class name 中的一些内容.simpleColor。现在我想给 .simpleColor 一个计算好的边距。在伪......它看起来像这样，

.simpleClass {
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2));
}

如果可能的话，我愿意使用任何其他技术（如 javascript）来实现这一点。

4

5 回答 5

74

有一个名为calc的 CSS 函数开始得到很好的支持。语法如下：

width: calc(50% - 100px);

（请注意，运算符周围的空格很重要）

这允许在 CSS 中实现真正的动态计算支持。使用预处理器，您只能将静态长度与静态长度以及相对长度与相对长度结合起来。

此时 calc 已获得广泛支持，应该可以安全使用，除非您有支持旧版浏览器的特定需求。

于 2013-05-29T03:26:08.063 回答
8

在 CSS 中原生地进行数学运算是不可能的。您可以使用 JavaScript 在页面加载时更改 CSS 属性，但这很麻烦，并且必须在每次页面加载时都这样做，这会使您的页面变慢。

您需要使用 CSS 预处理器，例如LESS、Stylus或SASS。

使用这两种语言的好处是您可以从它们生成实际的 CSS 样式表。您还可以获得诸如函数、mixin、变量等的好处。

于 2012-04-30T04:01:04.863 回答
3 
jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width() / 2) - (jQuery('.simpleColor').width() / 2) + 'px');

应该做你想做的事。但是你需要在 javascript 中做这样的事情，你不能在纯 CSS 中做到这一点，除非 #accordian 和 .simpleColor 的宽度是预先知道的（因此是预先计算好的）。

于 2012-04-30T04:00:58.243 回答
2

您可以在 CSS 中进行数学运算，例如：

height: calc(100% - 20%);

CSS 也将处理不同的单位，所以这也有效：

height: calc(100% - 20px);

此外，还添加了min()、max()和clamp()，允许进行如下计算：

height: min(calc(100% - 20px), 50%);

  1. min()：获取最小值；
  2. max()：获取最大值；和
  3. clamp()：通过提供上限和下限来限制值。
于 2020-07-14T23:48:03.540 回答
0

我相信 CSS 应该是纯样式定义。我不喜欢将一些计算与它混合在一起。我会在我的 javascript 中这样做

var accWidth=parseInt($("#accordion").css("width").replace("px",""));
var simpWidth=parseInt($(".simpleColor").css("width").replace("px",""));
var marginLeft=((accWidth/2)-(simpWidth/2));       
$(".simpleClass").css("margin-left",marginLeft);

工作示例http://jsfiddle.net/mzTRw/19/

于 2012-04-30T04:08:06.753 回答