当我调整窗口大小时,图像对齐不正确。我试图使每个图像的底部与.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>
已添加
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>