J'essaie de mettre 3 divs en 1 div. Sur la base de mon code, j'essaie de faire de Div 3 un conteneur pour Div 4-6. Cependant, même si Div 5 et Div 6 ont le même code, ils se chevauchent.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: blue;
width: 60%;
height: 400px;
text-align: center;
margin: auto;
}
#div2 {
background-color: red;
width: 90%;
height: 300px;
text-align: center;
margin: auto;
}
#div3 {
background-color: gray;
width: 95%;
height: 200px;
text-align: center;
margin: auto;
}
#div4 {
background-color: yellow;
width: 20%;
height: 100%;
text-align: center;
float:left;
}
#div5 {
background-color: green;
width: 40%;
height: 100%;
text-align: center;
float:left;
}
#div6 {
background-color: purple;
width: 40%;
height: 100%;
text-align: center;
float:left;
}
</style>
</head>
<body>
<div id="div1">test 1
<div id="div2">test 2
<div id="div3">test 3
<div id="div4">test 4</div>
<div id="div5">test 5</div>
<div id="div6">test 6</div>
</div>
</div>
</div>
</body>
</html>
le test 3 et le test 6 sont affichés mais je ne veux pas voir le test 3
Mon professeur a vérifié le code pour moi et m'a dit que le problème venait de mon navigateur. Je ne sais vraiment pas quoi faire.
J'ai essayé d'utiliser flex mais tout s'est déroulé en dehors du div. J'ai essayé de changer la position flottante de la division 6 mais rien n'a changé. J'ai essayé tout ce que j'ai appris et rien n'a fonctionné.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si vous utilisez flex comme ceci, c'est facile à corriger sauf qu'il faut considérer le texte de la DIV 3. L'utilisation d'un autre wrapper avec une direction de flexion différente résout ce problème.
<!DOCTYPE html> <html> <head> <style> #div1 { background-color: blue; width: 60%; height: 400px; text-align: center; margin: auto; } #div2 { background-color: red; width: 90%; height: 300px; text-align: center; margin: auto; } #div3 { background-color: gray; width: 95%; height: 200px; text-align: center; margin: auto; display:flex; } #div4 { background-color: yellow; width: 20%; height: 100%; text-align: center; } #div5 { background-color: green; width: 40%; height: 100%; text-align: center; } #div6 { background-color: purple; width: 40%; height:100%; text-align: center; } </style> </head> <body> <div id="div1">测试 1 <div id="div2">测试 2 <div id="div3"> <div id="div4">测试 4</div> <div id="div5">测试 5</div> <div id="div6">测试 6</div> </div> </div> </div> </body> </html>DIV 4, 5 et 6 ont l'attribut
float: leftet flottent autour du texte "test 3". Si vous supprimez ce texte, la DIV 3 ne sera plus visible :#div1 { background-color: blue; width: 60%; height: 400px; text-align: center; margin: auto; } #div2 { background-color: red; width: 90%; height: 300px; text-align: center; margin: auto; } #div3 { background-color: gray; width: 95%; height: 200px; text-align: center; margin: auto; } #div4 { background-color: yellow; width: 20%; height: 100%; text-align: center; float:left; } #div5 { background-color: green; width: 40%; height: 100%; text-align: center; float:left; } #div6 { background-color: purple; width: 40%; height: 100%; text-align: center; float:left; }<div id="div1">test 1 <div id="div2">test 2 <div id="div3"> <div id="div4">test 4</div> <div id="div5">test 5</div> <div id="div6">test 6</div> </div> </div> </div>