Tu veux une image à gauche avec le reste du texte occupant plusieurs lignes à droite de cette image ?
Si le texte est plus haut que la hauteur de l'image, que doit-il se passer ? Il continue à s'écouler sous l'image ou bien il forme une colonne restant à droite de l'image ?
Premier cas tu fais flotter l'image avec une petite marge à sa droite pour pas que le texte soit collé à l'image.
Deuxième cas : voir ci-dessous. La base est la même mais il faut un élément de plus dans ton paragraphe et cet élément aura une marge à gauche qui l'empêche de repasser sous l'image. La valeur de cette marge est supérieure à la largeur de tes images, ça ira mieux comme ça
Code :
<p class="descriptif"><img src="" alt="" width="190" height="" /><span>plusieurs lignes de texte à la suite</span></p>
|
Code :
.descriptif { clear: both; } .descriptif img { float: left; margin: 0 10px 5px 0; } .descriptif span { margin-left: 200px; display: block; }
|
Il existe deux autres solutions (au moins !) avec du positionnement relatif + absolu (l'image doit être moins haute que ton texte, ce n'est pas forcément ton cas) et surtout avec display: inline-block; , ses correctifs pour IE6/7 et pour Firefox 2 mais c'est d'un niveau un peu plus avancé ...
Sans clear: both; ... y en a qui ont eu des problèmes
Dans le cas où dans un premier paragraphe, ton 1er texte est plus court que la 1ère image, cela concerne le second paragraphe .descriptif où normalement l'image irait flotter sous le 1er texte à droite de ta 1ère image. Pas terrible comme effet. Là on empêche au contenu du paragraphe d'avoir quoi que ce soit à sa droite ou à gauche ("à gauche" suffirait avec clear: left; mais osef) donc la seconde image va aller se positionner bien sagement le plus à gauche possible càd sous la 1ère image.
Message édité par phosphoreloaded le 10-12-2009 à 07:02:59