Question

我有一堆动态生成的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;
}

Answer 1

解决此问题的最快方法是在文本前移动<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

Answer 2

只需添加：

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/

如何使浮动图像浮动到div的右上角？

2 个答案: