web-dev-qa-db-fra.com

Comment placer un texte à côté de l'image?

Je veux placer 2 photos, une en haut de la page et l'autre juste en dessous. Ensuite, je veux écrire quelque chose sur chaque image et je veux que le texte soit situé à droite de chaque image.

Comment cela peut-il être fait?

Je formate mes images comme suit, mais le problème est que les images sont comme elles étaient supposées le faire, mais le texte semble être uniquement par première image.

<p style="float: left; clear: left"><img src="image.jpg" height="200px" width="200px" border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<p style="float: left; clear: left"><img src="image.jpg" height="200" width="200" border="1px"></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
htmlcssimagetextparagraph
7
HelpNeeder

Utilisez simplement des divs wrapper comme ceci:

<div>
    <p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200px" width="200px" border="1px"></p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div style="clear: left;">
    <p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200" width="200" border="1px"></p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>

jsFiddle exemple

20
j08691

Quelques choses peuvent aider:

  1. Vos styles n'ont pas besoin d'être en ligne, mais je suppose que vous les mettez là par souci de concision.

  2. Les images n'ont pas besoin de l'emballage <p>; les styles peuvent être appliqués au <img> lui-même.

  3. Cela ressemble à ce que vous voulez vraiment, c'est deux morceaux de contenu distincts, chacun avec une image et du texte. Je suggère de placer l'image à l'intérieur du <p> élément - il est en ligne et <p> sont bloqués. Mettez d'abord l'image, puis faites-la flotter vers la gauche, comme vous l'avez essayé. Cela devrait réaliser ce que vous recherchez.

5
chipcullen