html - 链接在图片下方

标签 html css

<分区>

我在使用链接和 img 时遇到问题,因为链接中的空间很小。

HTML:

<div class="gridgallery">
    <figure><a href="../img/1-1.jpg" data-caption="Golden Gate Bridge">
    <img src="../img/thumbs/1-1.jpg"></a></figure>
</div>

CSS:

.gridgallery figure {
    background: #fff;
    margin:0px;
}
.gridgallery figure img {
    width: 100% !important;
    max-width:100%;
    opacity: 0.95;
}
#gallerytitle {
    width:950px;
    max-width:100%;
    margin:0px auto 15px auto;
}

演示:https://jsfiddle.net/paolobasso99/33h4ypab/1/

WHY????

最佳答案

像这样尝试: Demo

.gridgallery figure img {
    width: 100% !important;
    max-width:100%;
    opacity: 0.95;  
     display:block;
}

关于html - 链接在图片下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30572594/

上一篇:jquery - asp.net mvc/jquery 的自定义 css/sass 样式

下一篇:css - 行高属性是否继承自body

相关文章:

html - Bootstrap 输入文本与插件不对齐

javascript - 使用javascript创建文本文件

javascript - 如何为暗/亮模式切换保存 cookie?

javascript - MaterializeCSS 中带有复选框的可折叠标题

html - HTML 电子邮件签名中的图像错误

html - 在 HTML 文件中链接 CSS 和 Bootstrap

html - 如何将 2 个或更多 div 在同一行上居中? (CSS)

javascript - 设置列表元素宽度文本宽度

html - 如何删除 HTML/CSS 中的曲线

悬停图像灰度 + <p> 仅在悬停时可见