Question

如何在文本的右下角对齐浮动图像？我有一个背景颜色的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;
}

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

Answer 1

如果内容的长度不会改变，你可以随时将图像放在文本结尾之前，保持它在你正在做的时候浮动，最后一点文字会从左边流下来

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

Answer 2

很遗憾，

CSS没有提供这样做的方法。

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

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

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

Answer 3

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

添加到myText div样式：

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

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

Answer 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/。

图像对齐到文本的右下角

4 个答案: