我试图在图像的右上角(不是框中)定位来自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;}*/
总结 以上是内存溢出为你收集整理的html – CSS在图像的右上角定位一个图标全部内容,希望文章能够帮你解决html – CSS在图像的右上角定位一个图标所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)