在圖像上浮動文本，右對齊

Question

我有幾個嵌套的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; 
} 

Answer 1

innerwrapper類需要有

http://jsfiddle.net/8SDvu/

這是它的基本功能，你可能要添加一些填充和需要的地方利潤率相對位置，但我相信你可以計算的出

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

可能要添加

.floatedtext { 
    bottom: 0; 
} 

Answer 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; 
    } 

} .caption { 字體大小：13像素; } .floatedtext { font-size：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>