如何将内容对齐到div的所有四个角（右上，左上，右下，左下），并在每个角上都有边距？

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;确实）。 就是说，您的元素必须位于文档流中，以便无论如何都要注意边距和填充。

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

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

更新

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

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

Answer 2

我看不到单独使用CSS实现此目标的好方法。

position: absolute; 从文本流中删除图像。

我能看到的唯一方法是将图像放置在文本中间，然后将其正确浮动。

看到这个JSFiddle 。

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

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

可能是时候重新审视页面的设计，也许是重新设计此元素的好时机。

更新：

考虑到您的更新问题，我已经编辑了JSFiddle 。

您可以使用position: absolute; bottom: 0; left: 0; position: absolute; bottom: 0; left: 0; 将左图像包装器放置在父容器内。 如果您的右图比左图高（如您的示例），这将很好地工作。

我还重构了您的Fiddle，以解决其他一些问题。 请查看代码。