Saya cuba memasukkan 3 div ke dalam 1 div. Berdasarkan kod saya, saya cuba menjadikan Div 3 sebagai bekas untuk Div 4-6. Walau bagaimanapun, walaupun Div 5 dan Div 6 mempunyai kod yang sama, ia bertindih.
<!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>
ujian 3 dan ujian 6 ditunjukkan tetapi saya tidak mahu melihat ujian 3
Profesor saya menyemak kod untuk saya dan berkata masalahnya adalah dengan penyemak imbas saya. Saya betul-betul tak tahu nak buat apa.
Saya cuba menggunakan flex tetapi semuanya berjalan di luar div. Saya cuba menukar kedudukan apungan div 6 tetapi tiada apa yang berubah. Saya mencuba semua yang pernah saya pelajari dan tidak ada yang berhasil.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika anda menggunakan flex seperti ini, ia mudah untuk dibaiki kecuali perlu mempertimbangkan teks DIV 3. Menggunakan pembalut lain dengan arah flex yang berbeza menyelesaikan masalah ini.
<!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 dan 6 mempunyai atribut
float: leftdan terapung di sekeliling teks "ujian 3". Jika anda memadamkan teks itu, DIV 3 tidak akan kelihatan lagi:#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>