html - 将两个图像对齐到 的左下角和右下角

Question

我的页面目前有点像下面这样，以便在我的页面标题栏的每一侧放置两个图像。

    <div id="header" >
        <div style="float:left" >
            <img src="media/logo1.png"/>
        </div>
        <div style="float:right" >
            <img src="media/logo2.png"/>
        </div>
    </div>

虽然这适用于左右对齐，但我找不到使两个图像都与父图像底部对齐的好方法 <div> .它们似乎与顶部对齐。

但是我认为这可能只是错误的开始方法。因此，欢迎所有有关使其发挥作用的最佳方式的建议 - 或者更好的是，如何将图像任意强制到父对象的选定 Angular 落 <div> .

Answer 1

如果您的页眉具有固定高度，只需使用绝对定位:

<div id="header" >
    <img id="logo1" src="media/logo1.png"/>
    <img id="logo2" src="media/logo2.png"/>
</div>

然后在你的 CSS 中:

#header     { position: relative; height: 200px}
#header img { position: absolute; bottom: 0; left: 0}
#logo2      { left: auto; right: 0}

或者，如果您的页眉只有logo1.png那么高，那么请改用这个CSS:

#header     { position: relative;}
#logo2      { position: absolute; bottom: 0; right: 0}

这将导致 logo1 设置 header 的高度，而 logo2 将位于 header 的底部> 和右边。