css - 将文本 float 在图像上，右对齐

Question

我有几个嵌套的 div，我试图在图像的右下角 float 一些文本，然后在图像的右侧放置更多文本。 float 文本显示在整行的右侧，而不是图像的右侧。整个内容(连同其他文本)被包裹在一个大 div 中，如果我添加 bottom:0px，我想要 float 的文本就会显示在它的底部。

应该是(图片右下角有数字)

[_1] 标题

但是我得到了

[_] 标题 1

HTML

<div>
    <div class='outerwrapper'>
      <div class='innerwrapper'>
        <img src='image.jpg'>
        <div class='floatedtext'>1</div>
      </div>
      <div class='caption'>image caption to the right<br></div>
    </div>
</div>

CSS

.outerwrapper
{
  clear: both;
  min-height: 45px;
  margin-left: 10px;
}
.innerwrapper
{
   clear:both;
}
.caption
{
   font-size:13px;
}
.floatedtext
{
   font-size:12px;
   position: absolute;
   right:0px;
   text-align:right;   
}

Answer 1

innerwrapper 类需要相对位置

http://jsfiddle.net/8SDvu/

这是它的基础，您可能想在需要的地方添加一些填充和边距，但我相信您可以弄清楚这些

.innerwrapper
{
   clear:both;
   position: relative;
   float: left;
}

可能要添加

.floatedtext {
   bottom: 0;
}