css - calc() 不能正确处理复杂的计算

Question

我知道该主题已发布多次，但我找不到有关 calc() 函数问题的答案。我知道 + 和 - 之间的空格问题，但这次问题与此无关。

我无法使用
连续正确显示 3 张图像宽度:calc((100% - 20px)/3);

最后一张图片应该放在同一行，但它向下移动了。它有 margin-right: 0 所以表达式 calc((100% - 20px)/3) 应该将这三个 img 排成一行彼此相邻。

完整代码

* { margin: 0; padding: 0; background: red;}

img {
  float: left;
  margin-right: 20px;
  width: calc((100% - 20px) / 3);
  
  &.last { margin-right: 0; }
}

<!-- images should be displayed
      - in a row
      - with margin right 20px except last
------------------------------------------->

<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
<img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">

Answer 1

它应该是 40px 而不是 20px。

你有 3 张图片，除了最后一张之外，每张图片都带有 margin-right: 20px。所以它将是(3 * 20) - 20 = 40

* {
  margin: 0;
  padding: 0;
  background: red;
}
img {
  float: left;
  margin-right: 20px;
  width: calc((100% - 40px) / 3);
}
img.last {
  margin-right: 0;
}

<!-- images should be displayed
      - in a row
      - with margin right 20px except last
------------------------------------------->

<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
<img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">