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元素从文档流中移除（例如{{1确实）。也就是说，您的元素需要在文档流中，以便无论如何都要尊重边距和填充。

听起来你只需要正确地浮动它，应用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;：

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

Answer 2

单凭CSS我无法看到实现这一目标的好方法。

position: absolute;将从文字流中删除图片。

我能看到的唯一方法是将图像放在文本的中间并将其向右浮动。

请参阅此JSFiddle。

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

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

可能现在是重新审视页面设计的好时机，也许可以重新设计这个元素。

更新

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

您可以使用position: absolute; bottom: 0; left: 0;将左侧图像包装器放置在父容器内。如果您的正确图像比较高的图像（如您的示例中），这将正常工作。

我还重构了你的小提琴来解决其他一些问题。请参阅代码。

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

2 个答案:

更新