Placer <div> sur la même ligne que celle de l'image

J'ai du code HTML qui ressemble à ce qui suit: http://jsfiddle.net/KbqHa/

Je voudrais que cette div à être sur la même ligne que l'image. Cependant, il se déplace à la ligne ci-dessous en raison de la div être un élément de type block. Dans ce cas, j'avais l'habitude d'utiliser un <span>, mais cela a complètement bousille la frontière (et le div enveloppe sous l'image trop). L'ajout de display:inline-block à la div ne semble pas fonctionner non plus. J'ai essayé d'utiliser float: left mais je ne peux pas obtenir que le travail soit. Toutes les pensées?

  • Que voulez-vous dire exactement "être sur la même ligne"?
InformationsquelleAutor John Lyon | 2011-10-10
  1. 13

    La solution classique est d'utiliser float: left sur le img, puis ajouter un margin-left à la div égale à la largeur de l'image.

    Voir: http://jsfiddle.net/thirtydot/KbqHa/2/

    Cependant, ce n'est pas bon si la largeur de l'image est inconnue.

    Donc, la meilleure solution consiste à utiliser overflow: hidden sur le div.

    Voir: http://jsfiddle.net/thirtydot/KbqHa/3/

    La raison de ce qui apparemment absurde de la solution est expliquée ici.

    InformationsquelleAutor thirtydot