在图像底部对齐 div 容器

Question

我无法在图像底部对齐 div 容器。 我尝试的是编辑图像的属性位置并将其值设置为“相对”。

解释这有点困难，但我得到了带有一点预览的 html 和 css 代码 sn-ps： codepen.io/Proudyy/pen/PoOjYpK （它不是 84 行长，所以在我看来不算太多）

它应该是这样的： https://imgur.com/a/LShx2cM

Answer 1

在其父 div 上设置 position: absolute 为 .skin-item-footer 和 position: relative。检查下面的代码

.skin-item-splashart {
    width: 100%;
    border-radius: 12px;
    position: relative;
}
.skin-item-footer-left-container {
    grid-column: 1;
    display: grid;
    grid-template-rows: repeat(2, auto);
    align-self: start;
    height: 100%;
}
.skin-item-footer-right-container {
    grid-column: 2;
    display: grid;
    align-items: center;
    justify-content: end;
    align-self: end;
    height: 100%;
}
.skin-item-default-name {
    font-size: 24px;
    font-weight: bold;
    margin-left: 3vh;
}
.skin-item-name {
    font-size: 18px;
    color: gainsboro;
    margin: 0;
    margin-left: 3vh;
    grid-row: 1;
}
.skin-item-cost {
    display: grid;
    grid-row: 2;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: 1fr;
}
.skin-item-cost-value {
    color: gainsboro;
    grid-column: 1;
    margin: 0;
}
.skin-item-cost-icon {
    grid-column: 2;
    margin: 0;
}
.skin-item-save-icon {
    cursor: pointer;
    margin-right: 2vh;
}


.skin-item {
    background-color: rgb(0, 40, 75);
    margin: 15px;
    border-radius: 12px;
    height: auto;
    width: 50%;
    position: relative;
}
img{
    max-width: 100%;
}
.skin-item-footer {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 0 0 12px 12px;
    position: absolute;
    bottom: 0;
    height: auto;
    width: 100%;
}

<div class="skin-item">
    <img class="skin-item-splashart" src="https://cdn.communitydragon.org/latest/champion/1/splash-art/skin/1"/>
    <div class="skin-item-footer">
        <div class="skin-item-footer-left-container">
          <p class="skin-item-name">SkinName</p>
          <div class="skin-item-cost">
              <img class="skin-item-cost-icon" src="https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-static-assets/global/default/images/icon-rp-24.png"/>
              <p class="skin-item-cost-value">Spaceholder</p>
          </div>
        </div>
        <div class="skin-item-footer-right-container">
            <img class="skin-item-save-icon" src="https://img.icons8.com/color/32/000000/save--v1.png"/>
        </div>
    </div>
</div>