编辑:想通了,解释在下面
我有一个链接到大图的缩略图图库。我正在使用bootstrap 3。
有些图像无法填满整个列,并且每个图像之间的空间大小不一(但bootstrap会正确对齐它们)。由于某些原因,额外的空间是“可单击的”。我希望只有一个图像是可单击的。我该如何做到这一点?
代码的相关部分从<div class="row">
开始。
<body>
{% include "gallery_navbar.html" %}
<div class="tab-content">
{% for pane_name, reddit_posts in reddit_posts_by_pane.items %}
{% if pane_name == "food" %}
<div role="tabpanel" id="{{ pane_name }}" class="tab-pane active">
{% else %}
<div role="tabpanel" id="{{ pane_name }}" class="tab-pane">
{% endif %}
{% if reddit_posts %}
<div class="row">
{% for reddit_post in reddit_posts %}
<div class="col-lg-4 col-sm-4 col-xs-6">
<a data-rel="prettyPhoto[asd]" title="Image {{ reddit_post.rank }}" href="{{ reddit_post.submitted_link }}" style="display:block; height:100%; width:100%;">
<img class="thumbnail center-block" data-src="{{ reddit_post.submitted_link }}">
</a>
</div>
{% endfor %}
</div><!--end row-->
{% endif %}
</div><!-- end tab-pane-->
{% endfor %}
</div><!--end tab-content-->
编辑:额外的水平链接空间用display: inline-block
去掉了,但是底部填充/边距仍然链接到链接。我可以用margin-bottom=0px
去掉底部填充,但是我还没有找到一种方法来重新添加底部填充。
edit 2:我无法更改row div标签,即使添加另一个类(如“row-padded”)使其成为:
<div class="row row-padded">
使用css:.row-padded{ margin-bottom:30px}
因此,我只是在链接顶部添加了一个div标记。
3条答案
按热度按时间yfwxisqw1#
img
标记显示为内联文本,位于文本基线上,基线下方有空间用于放置任何字符下行符和下划线。将
img
显示为块可解决此问题。试试看:
这使得作为父
a
的唯一子的图像显示为块。这里有一个很好的描述,说明为什么会发生这种情况:http://doctype.com/anchor-tag-containing-only-img-extends-below-bottom-image
sc4hvdpw2#
试试这个,像下面这样更改html
工作演示http://jsfiddle.net/qb7xnfbd/
yjghlzjz3#
您也可以使用
<a>
上的display:contents:它将完全消失(沿着其他样式,如边距),您可以直接对图像进行样式设置,就好像周围没有<a>
一样。但在可访问性方面有一个警告:https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents