Voici d'abord l'exemple d'un commentaire qui se trouve à côté de la photo.
Il faut prendre garde que les dimensions de la photo n'excèdent pas celles du cadre défini.
Si les dimensions du cadre défini sont supérieures, la photo sera encadrée mais attention à l'inverse.
Dans cet exemple, les dimensiond du cadre et celles de la photo sont les mêmes.
DANS LES DEUX CAS, SI VOUS AGRANDISSEZ LE CADRE, LE COMMENTAIRE SE TROUVERA A L' INTERIEUR, CE QUI PEUT ETRE INTERESSANT. DANS CE CAS, IL FAUDRA DEFINIR LA COULEUR DU FOND. ICI, LA COULEUR DE FOND EST DEFINIE PAR #56890E MAIS NE SE VOIT PAS PUISQUE LE CADRE ET L'IMAGE ONT LES MËMES DIMENSIONS.
CODE
<div style="float:left; height:217px; width:300px; border:solid 1px black;
background-color:#56890E; line-height:20px;"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20150228/ob_f3e071_voir.jpg" /></div>
<p><span style="clear:both;"> <span style="font-size:20px;"> </span></span></p>
<p> </p>
<p ><span style="clear:both;"><span style="font-size:20px;"> Exemple de photo<br />
illustrant un article<br />
d'un autre blog</span></span></p>
RESULTAT
Exemple de photo
illustrant un article
d'un autre blog
Voici maintenant un commentaire qui se trouve sous la photo.
Il faut prendre garde que les dimensions de la photo n'excèdent pas celles du cadre défini.
Si les dimensions du cadre défini sont supérieures, la photo sera encadrée mais attention à l'inverse.
Dans cet exemple, les dimensions du cadre et celles de la photo sont les mêmes.
CODE
<div style="float:left; height:217px; width:300px; border:solid 1px black;
background-color:#56890E; line-height:40px;"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20150228/ob_f3e071_voir.jpg" /></div>
<p style="clear:both;"> </p>
<p id="yui_3_5_0_1_1425110977212_32750" style="clear:both;"><span id="yui_3_5_0_1_1425110977212_32772" style="font-size:20px;"> Exemple de photo<br />
illustrant un article<br />
d'un autre blog</span></p>
RESULTAT
Exemple de photo
illustrant un article
d'un autre blog
Haut de page