如何使浮動圖像浮動到div的右上角？

我有一堆動態生成的div。當文本很長時，它會包裝。這很好，但浮動刪除圖標浮動到底部。如何使浮動圖像浮動到div的右上角？

查看代碼之前需要注意的幾件事情。示例中的寬度是靜態的，但在我的使用中它是由容器定義的。我寧願不使用絕對定位，但將作爲最後的手段。

下面是一個例子就是我在談論（http://jsfiddle.net/3FYv8/1/）

<div class="deletableGroup">Marketing Department 
    <img title="delete" src="http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png"/> 
</div> 
<div class="deletableGroup">Sales 
    <img title="delete" src="http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png"/> 
</div>

CSS：

.deletableGroup img { 
    padding-left: 5px; 
    padding-top: 2px; 
    cursor: pointer; 
    float: right; 
} 
.deletableGroup { 
    width: 125px; 
    padding: 2px; 
    border: solid 2px lightskyblue; 
    background-color: #F5F5F5; 
    border-radius: 5px; 
    margin: 3px; 
    display: inline-block; 
}

來源

2014-01-17 Smeegs

解決這一問題將是移動文本前<img>最快捷的方式...

<div class="deletableGroup"> 
    <img title="delete" src="http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png" /> 
Marketing Department 
</div>

Here is an updated example

來源

2014-01-17 15:55:16 musefan

完美（這麼簡單），當SO計時器允許我時，我會接受這個答案。 – Smeegs

@Smeegs：是的，這很好，當你得到一個簡單的修復...雖然這將是個人喜好，添加'vertical-align：top;'到'.deletableGroup'看起來更好，IMO – musefan

我試過垂直對齊，這似乎沒有區別.. – Smeegs

只需補充一點：

HTML：

<div class="deletableGroup"> 
    <img title="delete" src="http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png"/> 
    Marketing Department  
</div>

CSS：

.deletableGroup img{ 
    float:right;  
}

小提琴：http://jsfiddle.net/3FYv8/2/

來源

2014-01-17 15:55:00

OP已經有了這個CSS，你不能只是建議他們已經有了！ – musefan

我已經有了，你做的那個工作是@musefan建議的，你在文本之前移動了圖像。 – Smeegs

@Smeegs：是的，我試圖更新你的小提琴。 Dint最初看到特定的css，我加了它認爲它不存在.. :) ..但很高興你的問題解決..乾杯 –

如何使浮動圖像浮動到div的右上角？

回答

相關問題