float text над изображением, выравнивание по правому краю

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 { размер шрифта: 13px; } .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>