如何在这个 div 的底部对齐图像？

Question

我有 3 张图片，想这样展示它们：

AABB
AABB
AACC
AACC

A,B,C 是图像。因为 A 的高度不是 B 和 C 的高度之和，所以我想显示 A 与 C 的底部对齐。

这是我现在使用的代码：

<div class="logo-wrap">

    <div class="site-title" style="position: relative;  " >
        <a href="@Url.Action("Index", "Home")">
        <img src="~/Images/girl.png"  />
        </a>
    </div>
    <div class="site-sub-header">
        <img src="~/Images/logo.png" style="height:75%;" />
        <br/>
        <img src="~/Images/icons.png" style="height:75%; " />
    </div>                

</div>

基于 How do I position an image at the bottom of div? ，我将 logo-wrap 设置为

position: relative; 

然后将girl.png图像设置为

position: absolute;
left: 0;
bottom: 0;

但它不起作用。有人有建议吗？

谢谢

Answer 1

用途：

display:inline-block;

组织行例如：“AABB”。

我不认为：

position:absolute;

这是一个很好的解决方案。