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

Question

当我调整 window 大小时，图像没有很好地对齐。我试图让每张图片的底部与 .pinkDiv 的末尾对齐，而不管 window 大小 .

这是一张图片在特定 window 尺寸下没有很好对齐的屏幕截图：

这是我的代码：

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

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

Align images on the same row regardless of window size

html

css

layout

window-resize