在图像上浮动文本，右对齐答案

【问题标题】：float text over an image, right-aligned在图像上浮动文本，右对齐
【发布时间】：2013-05-05 14:24:52
【问题描述】：

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

应该是（图片右下角有数字）

[_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;   
}

【问题讨论】：

标签： css image text css-position

【解决方案1】：

innerwrapper 类需要有相对位置

http://jsfiddle.net/8SDvu/

这是它的基础知识，您可能想在需要的地方添加一些填充和边距，但我相信您可以解决这些问题

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

可能要添加

.floatedtext {
   bottom: 0;
}

【讨论】：

【解决方案2】：

好的，所以我对您的 css 和您的 HTML 布局方式进行了更改，我相信这就是您正在寻找的。请让我知道这是否适合您。 JSFiddle

http://jsfiddle.net/cornelas/4MXvj/

CSS

.outerwrapper
  {
  clear: both;
 min-height: 45px;
  margin-left: 10px;
  }
.innerwrapper
  {
  clear:both;
  }
  .innerwrapper img {
    width: 35%;
    height: 35%;
    display: block;
   }
  .innerwrapper div {
   display: inline-block;
  }

} 。标题 { 字体大小：13px； } .floatedtext { 字体大小：12px;

HTML

<div>
   <div class='outerwrapper'>
   <div class='innerwrapper'>
    <img src='https://www.blackbaud.com/image/products/luminate-online/img_Advocacy.png'>
          <div class='floatedtext'>1</div>
          <div class='caption'>image caption to the right<br></div>
        </div>
    </div>
 </div>

【讨论】：