DIV 容器内的 HTML 图像底部对齐

Question

我有一个固定高度的 div 标签。大多数图像具有相同的高度和宽度。

我想对齐 div 底部的图像，以便它们排列得很好。这是我目前所拥有的:

<div id="randomContainer">
    <div id="imageContainer">
        <img src="1.png" alt=""/>
        <img src="2.png" alt=""/>
        <img src="3.png" alt=""/>
        <img src="4.png" alt=""/>
    </div>
    <div id="navigationContainer">
        <!-- navigation stuff -->
    </div>
</div>

CSS 看起来像:

div#imageContainer {
    height: 160px;  
    vertical-align: bottom;
    display: table-cell;
}

我设法将底部的图像与 display: table-cell 和 vertical-align: bottom css 属性对齐。

是否有更简洁的方式将 div 显示为表格单元格并将图像对齐到 DIV 标记的底部？

Answer 1

设置父div为position:relative，内部元素为position:absolute;底部:0