5568 sujets

Sémantique web et HTML

[Résolu] Probleme d'empilement de div contenant image avec float: left

Bonjour, j'ai un soucis d'empilement de div,
chaque div contient une image avec float: left et un texte (sensé s'afficher a droite de l'image).
Le problème est que le second div commence a la suite du texte flottant a droite de l'image du premier div.
Voici mon HTML:

<div>
    <img class="flotte" id="img3" src="img/img3.jpg">
    <p>texte à droite</p>
<p class="legende"> Image 14 : Choisir la taille de l’image</p>
</div>
<div>
    <img class="flotte" id="img4" src="img/img4.jpg">
</div>
<p>texte à droite</p>

Et le CSS 

.flotte{
	float: left;
}

Le problème est que cela me renvoie ceci: voir image.
Merci de votre aide c'est assez urgent.
Bonne journée. upload/1543147628-73417-sanstitre.png 
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0" />
		<title>Test GIMP</title>
		<style type="text/css">
		  figure {margin: 0.5em;}
		  .flotte {
			display:inline-table;
			float:left;
		  }
		  .flotte > * {display:table-cell;vertical-align:middle;}
		  .flotte figcaption{padding:0 0.5em;}
		</style>
	</head>
    <body>
		<figure class="flotte">
			<img id="img3" src="img/img3.jpg">
			<figcaption class="legende">
				<p>texte à droite</p>
				<p>Image 14 : Choisir la taille de l’image</p>
			</figcaption>
		</figure>
		<figure class="flotte">
			<img id="img4" src="img/img4.jpg">
			<figcaption class="legende">
				<p>texte à droite</p>
			</figcaption>
		</figure>
    </body>
</html>

Explications:
1) Une image avec un texte attaché est assez communément désigné comme une <figure>
2) ce qui "floote", c'est la <figure>, et non séparément l'image et le texte
3) la <figcaption> contient tout le texte, sous forme d'un ou plusieurs <p>
4) pour signifier que <img> et <ficaption> sont côte à côte, il est simple de les considérer comme des cellules d'une même table, d'où la définition de <figure> comme inline-table et de ses enfants directs comme des cellules de table

Voir http://jpmoularde.free.fr/tests/gimp.html
Je comprends la chose, mais quand j'essaye avec le code que vous m'avez fourni je n'ai aucun résultat, tout est a la suite comme si j'avais mis des <img> et des <p> à la suite
Cela à fonctionné "par miracle" (cela n'a pas fonctionné la premiere fois) à la méthode barbare des "<br><br><br>"
Merci de votre aide, voici le code si d'autres ont ce soucis.
Bonne continuation.

<div>
    <img class="flotte" src="img/img3.jpg">
    <p>texte à droite</p>
<p class="legende"> Image 14 : Choisir la taille de l’image</p>
</div>
<br><br><br>
<div>
    <img class="flotte" src="img/img4.jpg">
</div>
<p>texte à droite
</p>
</div>



.flotte{
	float: left;
}
iLoxe a écrit :
Je comprends la chose, mais quand j'essaye avec le code que vous m'avez fourni je n'ai aucun résultat, tout est a la suite comme si j'avais mis des &lt;img&gt; et des &lt;p&gt; à la suite

Peut on voir le code qui ne marche pas alors que le mien fonctionne, du moins sur mon site de test?
Dans mon navigateur, votre code affiche les image cote à cote de gauche a droite avec le texte en dessous, j'ai quand même essayé le code dans mon fichier, même résultat, tout est à la suite.
Le code qui ne fonctionne pas est le premier en haut, j'y suis revenu puis j'y ai ajouté les <br>.
iLoxe a écrit :
Dans mon navigateur, votre code affiche les image cote à cote de gauche a droite avec le texte en dessous, j'ai quand même essayé le code dans mon fichier, même résultat, tout est à la suite.
Le code qui ne fonctionne pas est le premier en haut, j'y suis revenu puis j'y ai ajouté les <br>.

Désolé de vous importuner, mais voici ce que donne ma page de test:
Avec Google Chrome:
upload/1543168414-48769-chrome.jpg

Avec FireFox:
upload/1543168496-48769-firefox.jpg

ça marche également sur ma tablette avec Safari.
Quel navigateur utilisez vous ?
Si ça ne fonctionne pas avec un autre navigateur, j'aimerais le savoir pour comprendre le problème.
Modifié par PapyJP (25 Nov 2018 - 18:56)
Sujet clos
Aller à