不能將 div 堆疊在一起，img 就在其他元素旁邊
[英]cannot stack the divs on top of each other, img is right beside the other elements
問題描述
body { background-color: black; } div.div1 { width: 100%; height: 80px; background-color: white; color: black; float: left; } div.div2 { width: 100%; height: 60px; background-color: green; color: black; float: left; } div.div3 { margin-top: 350px; margin-left: 50%; position: absolute; background-color: white; } div.parent { margin-top: 200px; position: relative; background-color: white; } p.one { float: left; padding-left: 10px; font-size: 20px; font-family: 'Courier New', Courier, monospace; } p.two { float: left; padding-left: 10px; font-size: 20px; font-family: 'Times New Roman', Times, serif; } img.haus { float: left; height: 50px; width: 50px; } img.head { width: 90%; height: 800px; position: absolute; }
<,DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="vorbereitung:css" type="text/css"> <title>Document</title> </head> <body> <section> <div class="div1"> <p class="one">Willkommen</p> <p class="one">Jordan 1</p> <p class="one">Jordan 3</p> <p class="one">Jordan 4</p> </div> <div class="div2"> <img class="haus" src="https.//cdn.pixabay.com/photo/2014/11/04/06/21/drawing-516251_960_720:png"> <p class="two">Neue Modelle</p> <p class="two">Reduziert</p> <p class="two">Shop all</p> </div> <div class="parent"> <img class="head" src="https.//www.kicksonfire.com/wp-content/uploads/2019/11/Air-Jordan-4-What-The-1-1?jpg?x27993"> <div class="div3">Shop Jordan 4</div> </div> </section> </body> </html>
我對 div .parent 、圖像img.head和 div .div3 。 我想將 img 和 div3 堆疊在一起，然后將它們放在.parent div 中。 沒有錯誤，但 img 位於 div 之外，緊挨着其他元素。 我試過 position 絕對和相對但它不起作用，請幫助。
1 個解決方案
解決方案1
0 2023-01-02 14:38:26
img.head {
width: 90%;
height: 800px;
}
div.div3 {
margin-top: 350px;
position: absolute;
background-color: white;
top: 10px;
left:10px;
}
（您可以使用 top 和 left 將元素保留在所需位置）
將兩個div並排放置后，右側的一個在底部
[英]After putting two divs beside each other, the one on the right is at the bottom
將兩個元素彼此並排放置，浮動將使img消失
[英]Positioning two elements beside each other, floating will make img disappear
如何在頁面中心將這些div堆疊在一起？
[英]How do I get these divs stack on top of each other right in the center of the page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.