Html 如何将内容与div的所有四个角（右上角、左上角、右下角、左下角）对齐并在每个角上留有边距？

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

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

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

但是我不能在它周围留一个空白（因为它超出了文档流）。因此，基于下面的一些答案，我尝试创建上面的JSFIDLE，使其在没有任何位置的情况下工作：绝对

下面是我的JSFIDLE示例：

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

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

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

---

有什么建议吗？

您可以使用相对定位来实现相同的

底部：0；

和

右侧：0；

位置……但这不会将您的

.bottom

元素移出文档流（如

位置：绝对；

会）.这就是说，您的元素必须在文档流中才能尊重边距和填充

听起来您只需要将其向右浮动，应用

display:inline；

，然后应用边距和填充。按源代码顺序将文本内容置于图像上方，然后图像应始终位于上方内容的下方和右侧（这取决于其他未知的布局变量）

已更新

为了解决您的新挑战，我在

上添加了
位置：相对；
容器

和

位置：绝对；

和

底部：0；

图像：

---

您可以使用相对定位来实现相同的

底部：0；

和

右侧：0；

位置……但这不会将

.bottom

元素移出文档流（如

位置：绝对；

会）.这就是说，您的元素必须在文档流中才能尊重边距和填充

听起来您只需要将其向右浮动，应用

display:inline；

，然后应用边距和填充。按源代码顺序将文本内容置于图像上方，然后图像应始终位于上方内容的下方和右侧（这取决于其他未知的布局变量）

已更新

为了解决您的新挑战，我在

上添加了
位置：相对；
容器

和

位置：绝对；

和

底部：0；

图像：

---

您可以使用相对定位来实现相同的

底部：0；

和

右侧：0；

位置……但这不会将

.bottom

元素移出文档流（如

位置：绝对；

会）.这就是说，您的元素必须在文档流中才能尊重边距和填充

听起来您只需要将其向右浮动，应用

display:inline；

，然后应用边距和填充。按源代码顺序将文本内容置于图像上方，然后图像应始终位于上方内容的下方和右侧（这取决于其他未知的布局变量）

已更新

为了解决您的新挑战，我在

上添加了
位置：相对；
容器

和

位置：绝对；

和

底部：0；

图像：

---

您可以使用相对定位来实现相同的

底部：0；

和

右侧：0；

位置……但这不会将

.bottom

元素移出文档流（如

位置：绝对；

会）.这就是说，您的元素必须在文档流中才能尊重边距和填充

听起来您只需要将其向右浮动，应用

display:inline；

，然后应用边距和填充。按源代码顺序将文本内容置于图像上方，然后图像应始终位于上方内容的下方和右侧（这取决于其他未知的布局变量）

已更新

为了解决您的新挑战，我在

上添加了
位置：相对；
容器

和

位置：绝对；

和

底部：0；

图像：

---

我看不到单独使用CSS就可以实现这一点的好方法

位置：绝对；

将从文本流中删除图像

我能看到的唯一方法是把你的图像放在文本的中间，并把它右移。

看这个

但是，您必须在文本中找到一个好的位置来放置图像，以使其看起来好看。您甚至可以为此编写一个JavaScript脚本

另一种方法只是将底部填充添加到图像的容器中

也许现在是重新审视页面设计并重新设计该元素的好时机

更新： 考虑到你的最新问题，我编辑了你的

您可以使用

position:absolute；bottom:0；left:0；

将左图像包装器放置在父容器中。如果右图像比左图像高（如示例中所示），这将很好地工作

---

我还对你的小提琴进行了重构，以解决一些其他问题。请查看代码。

我看不到单独使用CSS实现这一点的好方法

位置：绝对；

将从文本流中删除图像

唯一的应用程序

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