CSS calc() 函数在 Chrome 中不起作用答案

【问题标题】：CSS calc() function doesn't work in ChromeCSS calc() 函数在 Chrome 中不起作用
【发布时间】：2018-10-31 06:26:24
【问题描述】：

我想在列中设置特定的宽度，但 calc 函数不起作用。它在 Chrome 开发工具中显示错误。

代码：

.row {
  max-width: $grid-width;
  background-color: #eee;
  margin: 0 auto;

  &:not(:last-child) {
    margin-bottom: $gutter-vertical;
  }

  @include clearfix;

  [class^= "col-"] {
    background-color: orangered;
    float: left;

    &:not(:last-child) {
      margin-right: $gutter-horizontal;
    }
  }

  .col-1-of-2 {
    width: clac((100% - #{$gutter-horizontal}) / 2);
  }

  .col-1-of-3 {
    width: clac((100% - 2 * #{$gutter-horizontal}) / 3);
  }
}

【问题讨论】：

这里的代码：.row { max-width: $grid-width;背景颜色：#eee；边距：0 自动； &:not(:last-child) { margin-bottom: $gutter-vertical; } @include 清除修复； [class^= "col-"] { 背景色：橙红色；向左飘浮; &:not(:last-child) { margin-right: $gutter-horizontal; } } .col-1-of-2 { 宽度：clac((100% - #{$gutter-horizontal}) / 2); } .col-1-of-3 { 宽度：clac((100% - 2 * #{$gutter-horizontal}) / 3); } }
错字 - clac !== calc.
如果您不必支持 IE11，我建议您使用 CSS 网格，因为它内置了网格布局和装订线功能。
专业提示：在这里使用真实的单词。诸如“plz”之类的 Txtspk 可憎之物是投票磁铁 - 将其保存在社交媒体上。

标签： css sass

【解决方案1】：

您在 cmets 中发布的代码有 clac() 而不是 calc()

{ width: clac((100% - 2 * #{$gutter-horizontal}) / 3); } }

【讨论】：

谢谢伙计，真是个愚蠢的错误。

【解决方案2】：

calc 的拼写错误，您的代码中是 clac

【讨论】：

谢谢，这是一个愚蠢的错误。