无论窗口大小如何，将图像对齐在同一行上

Question

当我调整窗口大小时，图像对齐不正确。我试图使每个图像的底部与.pinkDiv 的末尾对齐，而与窗口大小无关。

这是一张图片的屏幕截图，在特定的窗口大小下无法很好地对齐：

这是我的代码：

.pinkDiv {
  position: relative;
  width: 100%;
  height: 290px;
  background-color: pink;
}

.miniDiv {
  width: calc(100% * 100 / 893);
  background-color: green;
}

.maxiDiv {
  width: calc(100% * 93 / 893);
  background-color: green;
}

img {
  width: 100%;
  height: auto;
  margin-top: 174px;
}

#queen {
  margin-top: 55px;
}

.tab2 {
  width: 100%;
  height: 5vh;
  background-color: rgb(208, 49, 45, 0.9);
}

<div class="pinkDiv">
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style=" width:100%;">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="maxiDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_piece_-_White_queen.jpg" style="width:100%"
      id="queen">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
</div>

<div class="tab2">
</div>

Answer 1

不确定这是否是您想要的：

已添加

display: flex;
align-items: flex-end;

到.pinkDiv

---

完整代码：

.pinkDiv {
  position: relative;
  width: 100%;
  height: 290px;
  background-color: pink;
  display: flex;
  align-items: flex-end;
}

.miniDiv {
  width: calc(100% * 100 / 893);
  background-color: green;
}

.maxiDiv {
  width: calc(100% * 93 / 893);
  background-color: green;
}

img {
  width: 100%;
  height: auto;
  margin-top: 174px;
}

#queen {
  margin-top: 55px;
}

.tab2 {
  width: 100%;
  height: 5vh;
  background-color: rgb(208, 49, 45, 0.9);
}

<div class="pinkDiv">
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style=" width:100%;">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="maxiDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_piece_-_White_queen.jpg" style="width:100%"
      id="queen">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
</div>

<div class="tab2">
</div>