bootstrap - 点击img,img右上角怎么添加一个类似√这样的标识呢？不用伪元素

问题描述

问 题

1.用的bootstrap布局，开始我是打算将img与一个<span>√</span>用a包起来，用定位，让span相对于a定位。

                                <a href="#">
                                    <img src="img/zhangsan/1.jpg" class="img-responsive img-thumbnail"/>
                                    <span>√</span>
                                </a>

但是因为是响应式布局，所以其实外层的a的宽度是不确定的，然后span的位置就超过图片 了。如图：第一个是正常情况下的图标位置，第二个是分辨率减小的情况，怎么就让这个图标就定在img的右上角呢？

现在代码是这样的，怎么实现呢？考虑到兼容性，不用伪元素。

                        <div class="row">
                            <div class="col col-md-3 col-sm-6 col-xs-6">
                                <a href="#">
                                    <img src="img/zhangsan/1.jpg" class="img-responsive img-thumbnail"/>
                                </a>
                            </div>
                            <div class="col col-md-3 col-sm-6 col-xs-6">
                                <a href="#">
                                    <img src="img/zhangsan/2.jpg" class="img-responsive img-thumbnail"/>
                                </a>
                            </div>
                            </div>

解决方案

受上面的启发，因为我的a的宽度是会随分辨率变化而变化，所以再包了一层，让div.imgBox的宽度刚刚好是里面img的宽度，这样再让span相对于imgBox定位，而不是相对于a定位就可以了。

<div class="col col-md-3 col-sm-6 col-xs-6 imgcol">
                                <a href="#">
                                    <div class="imgBox center-block">
                                        <img src="img/zhangsan/1.jpg" class="img-responsive img-thumbnail"/>
                                        <span>√</span>
                                    </div>
                                </a>
                            </div>

这篇关于bootstrap - 点击img,img右上角怎么添加一个类似√这样的标识呢？不用伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！