我正在嘗試將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的浮動位置,但沒有任何變化。我嘗試了我學過的所有方法,但都沒有起作用。
如果你像這樣使用flex,除了需要考慮DIV 3的文字外,它很容易修復。使用不同的flex方向的另一個包裝器可以解決這個問題。
DIV 4、5和6具有
float: left
屬性,並圍繞著文字「test 3」浮動。如果刪除該文本,則DIV 3將不再可見: