html – CSS在图像的右上角定位一个图标

发布时间：2020-12-14 22:54:41 所属栏目：资源来源：网络整理

导读：我试图在图像的右上角(不是框中)定位来自bootstraps sprite的关闭图标.我从一个有效的例子中得到了这个,但它对我不起作用.它总是在盒子外面和屏幕的右下角结束. 我怎样才能做到这一点？我已经设置了一个小提琴,但无法想象如何在那里获得精灵.你能帮我吗？ Fi

我试图在图像的右上角(不是框中)定位来自bootstraps sprite的关闭图标.我从一个有效的例子中得到了这个,但它对我不起作用.它总是在盒子外面和屏幕的右下角结束.

我怎样才能做到这一点？我已经设置了一个小提琴,但无法想象如何在那里获得精灵.你能帮我吗？

Fiddle


最佳答案
此示例可以拍摄任何高度的图像.
>转动< i class =“delete”>进入< div>
>包裹< img>使用新的删除div
>给.image：在最小高度之前：150px;并删除.image上的固定高度
>应用位置：相对于.delete
>将删除按钮应用于带有.delete的伪元素：之后或放置另一个< i>使它具有互动性.
Have an example!
Example without the delete pseudo element
HTML


CSS

.image:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    min-height: 150px;
}

.image {
    -moz-box-sizing: border-box;
    border: 1px solid #DDDDDD;
    float: left;
    margin-bottom: 10px;
    padding: 10px;
}

.delete {
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

.delete:after {
    content: '';
    position:absolute;
     top:0;
    right:0;
    height: 20px;
    width: 20px;
    background: #F00;
}

/* If you need to use a real element remove .delete:after and use this  -- 
.delete .delete-button {
    content: '';
    position:absolute;
     top:0;
    right:0;
    height: 20px;
    width: 20px;
    background: #F00;
}*/


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!