suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Warum ist der Div-Container sichtbar?

Ich versuche, 3 Divs in 1 Div zusammenzufassen. Basierend auf meinem Code versuche ich, Div 3 zu einem Container für Div 4-6 zu machen. Obwohl Div 5 und Div 6 denselben Code haben, überschneiden sie sich. 

<!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>

Test 3 und Test 6 werden angezeigt, aber ich möchte Test 3 nicht sehen

Mein Professor hat den Code für mich überprüft und gesagt, das Problem liege bei meinem Browser. Ich weiß wirklich nicht, was ich tun soll.

Ich habe versucht, Flex zu verwenden, aber alles lief außerhalb des Div. Ich habe versucht, die Float-Position von Div 6 zu ändern, aber es hat sich nichts geändert. Ich habe alles versucht, was ich jemals gelernt habe, aber nichts hat funktioniert.

P粉539055526P粉539055526449 Tage vor561

Antworte allen(2)Ich werde antworten

  • P粉982009874

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

    如果你像这样使用flex，除了需要考虑DIV 3的文本外，它很容易修复。使用不同的flex方向的另一个包装器可以解决这个问题。

    <!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>

    Antwort
    0
  • P粉551084295

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

    DIV 4、5和6具有float: left属性，并围绕着文本“test 3”浮动。如果删除该文本，则DIV 3将不再可见：

    #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>

    Antwort
    0
  • StornierenAntwort