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是一个很好的解决方案

如何对齐此底部的图像？

1 个答案: