calc()在复杂计算中无法正常工作

Question

我知道这个主题已经被讨论了很多次，但是我找不到有关calc()函数的答案。

我知道+和-之间的空格问题，但这次问题与此无关。

我无法正确地显示3张图像在一行中，使用
width: 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">

- rflw

---

应该使用width: calc((100% - 40px) / 3);而不是20px。因为第一个和第二个元素的margin都是20px + 20px。确保margin-right应用于最后一个元素。 - Santhosh Kumar

calc 是有效的，您可以自行检查：CSS.supports("width", "calc((100% - 20px) / 3)") 返回 true，所以它与运算符周围缺少空格无关。 - Sebastian Simon

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">

- Pugazh

---

值得解释的是，-40px 是前两个项目的右边距。仅提供可工作的代码是有帮助的，但他不会知道出了什么问题。 - DBS

Answer 2

请使用以下解决方案：

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

<!-- example original -->
<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">

<!-- example 3 images -->
<div class="row3">
  <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"> 
</div>

<!-- example 5 images -->
<div class="row5">
  <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
  <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
  <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"> 
</div>

计算容器中每个图像的图像宽度的公式为：

calc(([width-of-container] - ([margin-lr-images] * [count-images - 1])) / [count-images])

- Sebastian Brosch

---

他需要最后一个没有 margin-right。 - Francisco Romero

Answer 3

由于有两张带有margin-right: 20px的图片，因此该行的宽度应为100% - 40px，然后再除以3（20px x 2）。

请参见以下修订代码-我还更正了.last类，使其呈现正常的CSS。

* { 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">

- David Wilkinson