html - 如何将内容对齐到 div 的所有四个 Angular (右上角、左上角、右下角、左下角)并在每个 Angular 上留边距？

Question

我有一个 div，我想在 div 的右下角放一张图片，在左下角放一些图片。它们的高度不同，所以我想确保它们都与 div 的底部对齐。

首先，我使用以下方法使右下角对齐:

   position: absolute:
   bottom: 0;
   right: 0;

但后来我无法在它周围放置边距(因为它不在文档流中)。那么，基于下面的一些答案，我尝试创建上面的 jsfiddle 以使其在没有任何位置的情况下工作:绝对。

这是我的 jsFiddle 示例:http://jsfiddle.net/leora/FYw2D/ .

我现在唯一的问题是我希望左侧的图像与 div 的底部对齐(而不是与右侧图像的顶部对齐)。同样在某些情况下，我在左下角没有任何图像，但我希望具有相同的垂直间距(因此，如果我动态添加图像，它不会重置容器高度。

.images
{
    float: left;
    margin-top: 4px;
}

我尝试添加 vertical-align 和一些其他属性，但无法使两者都对齐到底部。

有什么建议吗？

Answer 1

您可以使用相对定位来实现相同的 bottom: 0; 和 right: 0; 放置...但这不会占用您的 。 bottom 元素脱离文档流(就像 position: absolute; 那样)。也就是说，您的元素需要在文档流中内，以便边距和填充无论如何都能得到尊重。

听起来您只需要将其正确 float ，应用 display: inline;，然后应用边距和填充。按源顺序将文本内容放在图像上方，然后图像应始终位于上方内容的下方和右侧(即，取决于其他未知的布局变量)。

.bottom {
   float: right;
   display: inline;
   padding: 20px 0 0 20px;
   margin: 20px 0 0 20px;
}

已更新

为了解决您的新挑战，我在 .container 和 position: absolute; 和 bottom 上添加了 position: relative;: 0; 在 .images 上:

http://jsfiddle.net/FYw2D/6/