删除 last-child 上的填充会导致不同大小的元素

Question

我有一个图片库，在特色图片下方有水平缩略图。我将 padding-right:10px; 添加到除 last-child 以外的所有元素，以努力平等地 space 这些元素。这在除最后一个缩略图以外的所有缩略图上都按预期工作，它比其余缩略图略大。

发生这种情况的原因是有道理的，但我不确定如何解决它。这是许多其他 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>

Answer 1

如果您想坚持使用 float 而不是 flex，您可以使用 margin 而不是 padding。然后，您可以计算边距所占的总数 space，将其除以元素数，然后使用 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>

删除 last-child 上的填充会导致不同大小的元素

Removing padding on last-child results in different sized element

css

css-selectors

grid

padding