Floating div's avec des images et du texte de longueur variable

Question

Je rencontre des problèmes pour mettre mon HTML en forme comme j'en ai besoin. Je crée dynamiquement div diviseur (parent). Dans chaque div il y a deux divs à l'intérieur (div un & deux).

Div one est un texte pouvant avoir n'importe quelle longueur ou longueur variable. Div deux contient une image.

Quelle que soit la taille de la div parente, le texte doit remplir autant de largeur que possible. Mais j'ai besoin de la 2ème div avec l'image, pour flotter au-dessus du texte juste à la fin de la ligne. J'ai également besoin de tous les divs de l'image, pour aligner verticalement.

Ce div parent est redimensionnable et peut être soit plus petit ou plus grand mais l'image flottante doit toujours être placée dans la ligne de la phrase mais sur la droite du conteneur.

Si le texte est plus large que le séparateur, l'image doit flotter contre le côté droit du conteneur parent sur la même ligne que le texte. Si le texte est plus petit que le parent, l'image doit toujours être sur le côté droit de la div parente. Pensez-y comme un arrêt complet d'image flottante, si cela a du sens. où chaque phrase a son arrêt complet dans une longue ligne verticale.

J'ai essayé les divs et les tables, mais j'ai des résultats déformés.

Voici mon code actuel:

<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> 

Merci

Answer 1

Je pense qu'il est un peu difficile de visualiser ce résultat que vous essayez d'obtenir. Pouvez-vous dessiner un diagramme qui illustre vos résultats souhaités?

mieux que je peux dire, vous êtes à la recherche de ce (afficher les résultats à jsFiddle): http://jsfiddle.net/kcschaefer/GYQea/9/

code

est:

<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 -->