[英]How do I position a right-floating div block at the top of its parent element, when I have other existing div blocks that float to the left?
[英]How do I make a floating image float to the top right of a 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;
}
解决此问题的最快方法是将<img>
移至文本之前...
<div class="deletableGroup">
<img title="delete" src="http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png" />
Marketing Department
</div>
只需添加:
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.