HTML - 如何在html中將浮動div標籤浮在p標籤和h5標籤之上

因此，就是這樣。我正在使用HTML ..我已經試圖做絕對和相對的事情..但不知何故它不適合我..或者我做錯了，但無論如何這裏是問題..HTML - 如何在html中將浮動div標籤浮在p標籤和h5標籤之上

灰色背景是body標籤
白框帶有紅色邊境是一個div容器，它浮動
綠色邊界持有H5標籤
藍色寄宿生持有p標籤

如果你運行下面的代碼片段，你可以看到黑色框是我的'圖像'坐的位置。我只需要將黑匣子放置在紅色邊框內白色方框右側的所有其他標籤上方。如果你無法看到我正在談論的黑盒子，請向下滾動查看代碼片段的全部輸出。

/*Location*/ 
 
#Location { 
 
    width: 37.5%; 
 
    height: 300px; 
 
    background-color: white; 
 
    float: left; 
 
    margin-left: 24%; 
 
    margin-top: 5px; 
 
    border-radius: 3px; 
 
    border: 2px solid red; 
 
} 
 

 
#Location>p { 
 
    padding-left: 10px; 
 
    font-size: 14px; 
 
    border: 2px solid blue; 
 
} 
 

 
#Location>h5 { 
 
    padding-left: 10px; 
 
    color: cornflowerblue; 
 
    border: 2px solid green; 
 
} 
 

 
#MapID { 
 
    height: 15%; 
 
    width: 15%; 
 
    border: 2px solid black; 
 
}

<div id="Location"> 
 
    <h5>Some text Header</h5> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <div id="MapID"></div> 
 
</div>

來源

2017-10-29 Uraforclain

爲什麼不能簡單地把它'的content'以上？ –

，可以使用絕對這個職位，但「的azazaz」的家長需要有position: relative爲它工作。

在您的示例中，我僅將position: relative添加到#Location，然後您可以按照您的預期使用position: absolute。

/*Location*/ 
 
#Location { 
 
    position: relative; 
 
    width: 37.5%; 
 
    height: 300px; 
 
    background-color: white; 
 
    float: left; 
 
    margin-left: 24%; 
 
    margin-top: 5px; 
 
    border-radius: 3px; 
 
    border: 2px solid red; 
 
} 
 

 
#Location>p { 
 
    padding-left: 10px; 
 
    font-size: 14px; 
 
    border: 2px solid blue; 
 
} 
 

 
#Location>h5 { 
 
    padding-left: 10px; 
 
    color: cornflowerblue; 
 
    border: 2px solid green; 
 
} 
 

 
#MapID { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    height: 15%; 
 
    width: 15%; 
 
    border: 2px solid black; 
 
}

<div id="Location"> 
 
    <h5>Some text Header</h5> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <div id="MapID"></div> 
 
</div>

來源

2017-10-29 07:40:27 karl

雅正是我所做的......但它似乎並沒有在我的代碼上工作任何想法y雖然：/ – Uraforclain

如果它在上面的代碼段中工作，但不在您的代碼中，很難說明原因。確保你不會意外地覆蓋CSS中其他位置的'position'值。如果您不確定，請檢查Chrome中的元素以查看實際使用的CSS值。 – karl

解決！哈哈你的權利.. jeez！感謝卡爾; D – Uraforclain

爲什麼就不能做到這一點：

使內容上面的div，然後用margin-left:auto作出正確alignement。

/*Location*/ 
 
#Location { 
 
    width: 37.5%; 
 
    height: 300px; 
 
    background-color: white; 
 
    float: left; 
 
    margin-left: 24%; 
 
    margin-top: 5px; 
 
    border-radius: 3px; 
 
    border: 2px solid red; 
 
} 
 

 
#Location>p { 
 
    padding-left: 10px; 
 
    font-size: 14px; 
 
    border: 2px solid blue; 
 
} 
 

 
#Location>h5 { 
 
    padding-left: 10px; 
 
    color: cornflowerblue; 
 
    border: 2px solid green; 
 
} 
 

 
#MapID { 
 
    height: 15%; 
 
    width: 15%; 
 
    border: 2px solid black; 
 
    margin-left: auto; 
 
}

<div id="Location"> 
 
    <div id="MapID"></div> 
 
    <h5>Some text Header</h5> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 
    <p>Some text: </p> 
 

 
</div>

來源

2017-10-29 07:55:54

實際上我正在尋找的是卡爾在下面做了什麼。謝謝temani :) – Uraforclain

這個答案不是「不正確」 - 它實際上是更好的解決方案。 – UncaughtTypeError

如果他問如何用CSS做些什麼，最好的答案就是不要通過改變HTML結構來實現。 – karl

HTML - 如何在html中將浮動div標籤浮在p標籤和h5標籤之上

回答

相關問題