css - 调整一些图像宽度以保留在父级内部，水平对齐

Question

我有一个我需要的空间，用于存储图像，每个图像宽度为总宽度的 25%。

不管图片大小，图片都需要调整到25%的宽度。

图像之间也有填充，但第一个和最后一个没有到父级的填充。

我使用 float 因为一些用户使用 IE9 和 10。

* {box-sizing: border-box;}
.row {
  max-width: 35rem;
  margin: 0 auto;
  border: 1px solid red;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.lt {
  margin: 3rem auto 0;
}

.lt a:first-child {
  padding-left: 0;
}

.lt a {
  display: block;
  float: left;
  text-align: center;
  padding: 0 .5rem;
  padding-left: 0.5rem;
  width: 25%;
}

.lt a img {
  height: auto;
  width: 100%;
  overflow: hidden;
}

<div class="row">
  <div class="lt clearfix">
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
  </div>
</div>

Answer 1

要分解问题，您有 4 个元素占父元素的 25%，但您也有 其中 3 个元素的 0.5rem 填充，这将导致这 4 个元素将占用更多 100% 的容器。

IE9 对 calc 有部分支持，所以我建议您使用 calc 将给每个元素的填充减去宽度，如下所示:

width: calc(25% - (1.5rem / 4));

编辑:正如 OP 后面所述，有 box-sizing:border-box，为了解决这个问题，这个答案将 padding 更改为 margin。

在此处查看完整示例:

* {
  box-sizing: border-box;
}

.row {
  max-width: 35rem;
  margin: 0 auto;
  border: 1px solid red;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.lt {
  margin: 3rem 0.5rem 0;
}

.lt > a + a {
  margin-left: 0.5rem;
}

.lt a {
  display: block;
  float: left;
  text-align: center;
  width: calc(25% - (1.5rem / 4));
}

.lt a img {
  height: auto;
  width: 100%;
  overflow: hidden;
}

<div class="row">
  <div class="lt clearfix">
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
  </div>
</div>

---

奖励:

我已经改变了你的策略，在图像之间提供填充，使用相邻的兄弟选择器:

.lt > a + a {
  margin-left: 0.5rem;
}