[Résolu] Position d'une image à droite sans texte en-dessous ?

Bonsoir,

Je rencontre un problème concernant le positionnant d'une image.
En effet, je veux que mon image se positionne à droite d'un texte sans pour autant que la suite de la ligne passe en dessous de mon image.
( | représente les bord de block, X représente mon image (qui est réellement une croix mais peu importe)).

Exemple 1:
| Je suis du texte sur une ligne X |

Exemple 2:
| Je suis du texte sur plus d'une X |
| ligne blablabla et blablablablabl |
|ablablabla .... |

Ce comportement est également visionable sur Facebook lorsque vous passé la souris sur un commentaire, une croix gris apparaît, je cherche à reproduire la même chose.

Ma structure HTML :

<p class="comment">
    <span class="pseudo">Alsacreation Test</span>
    Je suis un commentaire
    <a href="#" title="Supprimer"><img src="#" alt="Supprimer'></a> <!-- mon image à placer-->
</p>

Test 1

.comment img {
   float: right;
}

La croix est bien à droite mais uniquement par rapport à la dernière ligne.

Test 2

.comment {
   position: relative;
}

.comment img {
   position: absolute;
   top: 0px;
   right: 4px;
}

L'image se positionne bien à droite de la première ligne, cependant le texte passe "sous" l'image (à cause de la sortie du flux de l'img...).

J'ai penser à englober le commentaire dans un block en inline-block et l'image dans un conteneur en inline-block également afin d'étendre le height du block de l'image a 100% mais cela me semble tirer par les cheveux...
Exemple :

<p class="comment"><span>[Tout mon contenu sauf l'image en inline-block]</span><span>[Span contenant l'image en inline-block]</span></p>

J'attends vos retour.
Merci et bonne soirée
Modifié par bills (05 Apr 2016 - 16:06)

l'image est a mettre en premier et float:right;

C'est une utilisation classique d'un flottant.

Si l'image doit impérativement être ailleurs dans le conteneur, alors réserver la place avec un pseudo flottant et dimensionné. http://codepen.io/gc-nomade/pen/ZWaBBr
Modifié par gcyrillus (05 Apr 2016 - 00:20)

J'ai pas été très fort sur ce coup là... Merci beaucoup gcyrillus !