css - 删除最后一个子元素的填充会导致不同大小的元素

Question

我在特色图片下方有一个带有水平缩略图的图片库。我正在添加padding-right:10px;除了最后一个孩子之外的所有内容，以平均分配这些元素。这在除最后一个缩略图之外的所有缩略图上都按预期工作，它比其他缩略图稍大。

为什么会发生这种情况是有道理的，但我不知道如何解决它。这是许多其他 Stack Overflow 帖子中推荐的解决方案。任何解决方法将不胜感激。

<style>
.gallery-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr;
  column-gap: 10px;
  row-gap: 30px;
}
.image-thumb {
  float: left;
  width: 20%;
  padding-right: 10px;
  box-sizing: border-box;
}
.image-thumb:last-child {
    padding-right: 0;
}
</style>

    <div class="gallery-grid">

            <img id="featured-image" src="featured.jpg" style="width:100%">

            <div class="image-thumb">
                <img src="featured_thumb.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
            </div>
            <div class="image-thumb">
                <img src="thumb.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
            </div>
            <div class="image-thumb">
                <img src="thumb.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
            </div>
            <div class="image-thumb">
                <img src="thumb.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
            </div>
            <div class="image-thumb">
                <img src="thumb.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
            </div>

</div>

标签： csscss-selectorsgridpadding

Answer 1

如果你想坚持使用floatinsteed offlex你可以使用margininsteed of padding。然后，您可以计算边距占用的总空间，将其除以元素数量，然后使用calc

(margin-right:10px * 4) / 5 = 8

例子：

* {box-sizing:border-box;}
.box {
  height:100px;
  background-color:blue;
  float:left;
  width:calc(20% - 8px);
  margin-right:10px;
}
.box:nth-child(5) {margin-right:0;}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>