Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Sauvegarder le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .box { flottant: gauche; largeur: 50%; padding: 50px; hauteur: 300px; } .clearfix::after { contenu: ""; clair: les deux; afficher: table; } </style> </head> <body> <h2>Boîtes de Hauteur Égale</h2> <p>Boîtes flottantes avec des hauteurs égales :</p> <div class="clearfix"> <div class="box" style="background-color:#bbb"> <h2>Boîte 1</h2> <p>Certain contenu, certain contenu, certain contenu</p> </div> <div class="box" style="background-color:#ccc"> <h2>Box 2</h2> <p>Certain contenu, certain contenu, certain contenu</p> <p>Certain contenu, certain contenu, certain contenu</p> <p>Certain contenu, certain contenu, certain contenu</p> </div> </div> <p>Cet exemple n'est pas très flexible. Il est acceptable d'utiliser la hauteur CSS si vous pouvez garantir que les boîtes auront toujours la même quantité de contenu, mais ce n'est pas toujours le cas. Si vous essayez l'exemple ci-dessus sur un téléphone mobile (ou redimensionnez la fenêtre du navigateur), vous verrez que le contenu de la deuxième boîte sera affiché en dehors de la boîte.</p> <p>Retournez au tutoriel et trouvez une autre solution, si ce n'est pas ce que vous voulez.</p> </body> </html>