html - CSS:沿div底部对齐图像

Question

我正在尝试沿底部边缘对齐 3 张图像，使其看起来干净均匀。我在一个 Div 中有 3 个图像，并且 Div 在一个部分中。该部分是相对定位的，Div 是绝对定位的，bottom: 0 因此图像保留在页面底部的页脚上方。

如何让图像的底部边缘像在一条直线上一样对齐？

注意*:忽略内联样式，图像不成比例所以我不得不内联样式来修复它们。

HTML:

<section>
    <div class="logo-footer">
        <img style="width: 100px; margin-right: 40px" src="google.com/images/srpr/logo11w.png"/>
        <img style="width: 500px; height: 75px; " src="google.com/images/srpr/logo11w.png"/>
        <img style="width: 250px" src="google.com/images/srpr/logo11w.png"/>
    </div>
</section>

CSS:

.logo-footer {
display: -webkit-flex;
display: flex;

-webkit-flex-direction: row;
flex-direction: row;

-webkit-justify-content: center;
justify-content: center;

-webkit-align-self: center;
align-self: center;

height: 115px;

position: absolute;
bottom: 10px;
}

.logo-footer img{
margin: 0 50px;
}

Answer 1

设置 section position:relative 和 div position:absolute，颠倒你做到了。然后设置 div bottom:0px 或任何你需要的。