Плавающие div с изображениями и текстом переменной длины

Question

У меня проблемы с форматированием моего HTML-кода так, как он мне нужен.

Я создаю div динамически (родитель).В каждом div есть два div внутри (div one & two).

Div - это текст любой длины или переменной длины.Div два содержит изображение.

Независимо от размера родительского div, текст должен заполнять как можно большую ширину.Но мне нужно 2-й div с изображением, чтобы плавать над текстом прямо в конце строки.Мне также нужно, чтобы все div изображения были выровнены по вертикали.

Этот родительский div может быть любого размера и может быть меньше или больше, но плавающее изображение всегда должно находиться в строке предложения, но справа отконтейнер.

Если текст шире, чем родительский элемент div, изображение должно располагаться напротив правой стороны родительского контейнера в той же строке, что и текст.Если текст меньше родительского, изображение все равно должно быть справа от родительского div.

Думайте о нем как о полной остановке плавающего изображения, если это имеет смысл.где каждое предложение имеет полную остановку в одной длинной вертикальной строке.

Я пробовал и div, и таблицы, но получаю искаженные результаты.

Вот мой текущий код:

  <div>
    <div style="display: inline; float: left;">
        Text Goes here</div>
    <div style="display: inline; float: right; z-index: 1000;">
        <img src="info.png" /></div>
</div>
<div>
    <div style="display: inline; float: left;">
        Next line of Text Goes here</div>
    <div style="display: inline; float: right; z-index: 1000;">
        <img src="info.png" /></div>
</div>

Спасибо

Answer 1

Я думаю, что немного сложно представить, какой результат вы пытаетесь получить.Можете ли вы нарисовать диаграмму, которая иллюстрирует ваши желаемые результаты?

Насколько я могу судить, вы ищете это (просмотреть результаты в JSFiddle): http://jsfiddle.net/kcschaefer/GYQea/9/

Код:

<div id="parent" style="width: 100%;">
<div>
        First text goes here
         <img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />
<div>
    <div style="clear: both;"></div>

<div>
        Next line of  really long text that demonstrates how the float will work would go  right here, and you can see that the info thingie goes all the way to  the end of the div, no matter how long this is.
         <img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />

<div>
</div><!-- end parent -->