gpt4 book ai didi

html - 链接延伸到图像外的空间

转载 作者:太空宇宙 更新时间:2023-11-04 03:22:20 24 4
gpt4 key购买 nike

编辑:弄清楚了,底部有解释

我有一个链接到更大图像的缩略图图库。我正在使用 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 删除底部填充但我还没有想出一种方法来添加底部填充。

edit2:我无法更改行 div 标签,即使添加另一个类(如“行填充”)也无法更改:

 <div class="row row-padded">

使用 CSS: .row-padded{ margin-bottom:30px}

所以我只是在链接顶部添加了一个 div 标签,从而采取了迂回的方式。

最佳答案

img 标签显示为内联文本,位于文本基线上,其下方有用于任何字符下行和下划线的空间。

img 显示为一个 block 可以解决这个问题。

尝试:

a > img:only-child {
display: block;
}

这使得作为父级 a 的唯一子级的图像显示为一个 block 。

关于为什么会发生这种情况的很好的描述可以在这里找到:http://doctype.com/anchor-tag-containing-only-img-extends-below-bottom-image

关于html - 链接延伸到图像外的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27698166/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com