如何在div的右下角放置一個img
[英]How to place a img in the right bottom corner of a div
問題描述
替代文字 http://img190.imageshack.us/img190/7514/unbenanntax.jpg
這就是我想要做的。 一個帶有一些文本的 Div，右下角是一個 img。 div 的高度穩定在 24px，但長度未知，並且可能有多個這樣的 div 連續。
5 個解決方案
解決方案1
29 已采納 2009-09-25 09:54:04
有幾種方法可以做到這一點。 最簡單的：
<div class="outer">
<img src="....">
</div>
和
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
現在它脫離了正常流程，這是一個問題，您希望其他內容環繞/浮動在它周圍。 在這種情況下，您真的需要知道圖像的高度，然后根據您的情況應用適當的技巧。
例如，如果圖像高 10 像素，您可以嘗試以下操作：
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
當然 14px 來自 24px - 10px。 我不知道這是否會滿足你想要實現的目標。
解決方案2
0 2009-09-25 10:16:08
背景圖片是您的解決方案。
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
如果需要，您可能還需要調整 div 的內邊距，以便 div 的內容不會與您的圖片重疊。
解決方案3
0 2013-11-12 19:45:29
如果您想在圖像周圍浮動文本，那么這兩個答案都是錯誤的。 兩者都會使文本直接覆蓋圖像。 我一直在尋找幾個小時，似乎沒有真正的答案存在。 這篇文章更清楚地解釋了為什么如果您嘗試包裝文本，這兩個答案都不起作用。
解決方案4
0 2021-07-14 13:34:45
<div class='main'>
<div>...</div>
<div>...</div>
<div class="img-div">
<img src="....">
</div>
</div>
div.main {
height: 1164px;
width: 900px;
}
div.img-div {
position: absolute;
top: 1084px;
left: 817px;
margin: .75rem;
}
假設圖像尺寸為 57*55
解決方案5
-1 2021-04-06 11:17:16
僅用於在右下角定位圖像：我在 div 中有“Div”和圖像，在 div 的右下角有小圖像。
詳細： https : //jsfiddle.net/ez08vL7w/
<html>
<head>
</head>
<body>
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src="http://images.unsplash.com/photo-1529736576495-1ed4a29ca7e1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"/>
<a href ="" target="_blank">
<img src="https://media.gettyimages.com/photos/tiger-portrait-picture-id949472768?s=612x612"/> </a>
</div>
</body>
</html>
簡化：
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src=""/>
<img src=""/>
</div>
如何在div中放置div <form> 在模式對話框的右下角？
[英]How can I place a div in <form> at the bottom right corner of modal dialog?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.