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

Answer 1

应该是40px而不是20px。

除了最后一张之外，您有3张图片margin-right: 20px。所以它将（3 * 20） - 20 = 40

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用以下解决方案：

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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

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

Answer 3

因为有2张图片带有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">

calc（）在复杂计算中无法正常工作

3 个答案: