recherche

Maison  >  Questions et réponses  >  le corps du texte

Pourquoi le conteneur Div est-il visible ?

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é.

P粉539055526P粉539055526500 Il y a quelques jours583

répondre à tous(2)je répondrai

  • P粉982009874

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

    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>

    répondre
    0
  • P粉551084295

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

    DIV 4, 5 et 6 ont l'attribut float: left et 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>

    répondre
    0
  • Annulerrépondre