cari

Rumah  >  Soal Jawab  >  teks badan

Mengapa bekas Div kelihatan?

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.

P粉539055526P粉539055526449 hari yang lalu562

membalas semua(2)saya akan balas

  • P粉982009874

    P粉9820098742023-09-10 00:49:59

    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>

    balas
    0
  • P粉551084295

    P粉5510842952023-09-10 00:37:36

    DIV 4, 5 dan 6 mempunyai atribut float: left dan 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>

    balas
    0
  • Batalbalas