图像对齐到文本的右下角答案

【问题标题】：image aligment to the right - bottom corner of a text图像对齐到文本的右下角
【发布时间】：2014-05-30 01:49:11
【问题描述】：

如何在文本右下角对齐浮动图像？我有一个具有背景颜色并包含文本的 div。我想在右下角的那个 div 标签中看到一个图像。任何 CSS 解决方案？？

<div id="myText"> 
A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here 
<img id ="info_ico" src="images/key_ico.png" />

<div>

#myText
{
        background:#fdf6cc;
    min-height: 90px;
    margin-left:1px;
    width: 913 px;
    padding-left: 30px;
}

#info_ico
{
     float:right; 
     clear:right;
}

现在要更改什么才能看到文本底部的图像？

【问题讨论】：

你有没有试过把图片设置为你的DIV背景，然后background-repeat: no-repeat和background-position: right bottom？也许您还需要设置 DIV 宽度，以便适合文本和图像本身。
文字还需要环绕图片吗？
是的，文字应该在图片周围。
您仍然可以使用图像作为背景，并设置 DIV 右填充。是的，如果您希望在图像顶部显示文本，则整个方法无效。

标签： html css image css-float alignment

【解决方案1】：

如果内容的长度不会改变，您始终可以将图像放在文本末尾之前，保持它在您做的时候向右浮动，最后一点文本将顺着左侧流下.

此处示例：http://jsfiddle.net/pBDaJ/

【讨论】：

【解决方案2】：

很遗憾，CSS 没有提供这样做的方法。

您唯一能做的就是通过实验更改在文本中插入img 的位置，直到它最终出现在您想要的位置：http://jsfiddle.net/KQFBb/1/

如果内容是动态的，或者容器的尺寸可能会发生变化，这显然是不可行的。

在这种情况下，唯一的选择就是使用 JavaScript。

【讨论】：

【解决方案3】：

使用背景你应该能够做到这一点。

添加到您的 myText div 样式：

background: url('images/key_ico.png') no-repeat;
background-position: 100% 100%;

这会将图片放置在 div 的右下角。希望这会有所帮助:-)

【讨论】：

【解决方案4】：

您可以使用 ::before 伪元素在浮动图像上方添加特定高度。只需将伪元素浮动到右侧并给它一些高度；然后将图像向右浮动，清除伪元素。

.wrapper::before {
    content: '';
    float: right;
    height: 300px; /* Height of the container minus the height of the image */
}
.wrapper img {
    float: right;
    clear: right;
}

如果您不知道内容的高度，则需要一些轻量级的 JavaScript。有关工作示例，请参阅 http://jsfiddle.net/3jvJh/。

【讨论】：