Div容器為何可見?
P粉539055526
P粉539055526 2023-09-09 13:16:39
0
2
550

我正在嘗試將3個div放入1個div中。根據我的程式碼,我試著讓Div 3成為Div 4-6的容器。然而,儘管Div 5和Div 6的程式碼相同,但它們重疊在一起。

<!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和test 6,但我不想看到test 3

我的教授幫我檢查了程式碼,並說問題出在我的瀏覽器上。我真的不知道該怎麼辦。

我嘗試使用flex,但所有內容都跑到了div之外。我嘗試更改div 6的浮動位置,但沒有任何變化。我嘗試了我學過的所有方法,但都沒有起作用。

P粉539055526
P粉539055526

全部回覆(2)
P粉982009874

如果你像這樣使用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>
P粉551084295

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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板