带有锚标记的图像不像链接答案

【问题标题】：Images with anchor tag not acting like a link带有锚标记的图像不像链接
【发布时间】：2015-07-28 12:09:55
【问题描述】：

我有一个简单的portfolio，它有一个最终可以工作的图像网格。我希望图像在单击时链接到另一个页面，其中包含有关每个项目的更多信息。

由于某种原因，锚标签不像链接，您无法点击它们。

.work {
width: 100%;
margin-top: 50px; }

这是一个 JS Fiddle - http://jsfiddle.net/tomwalshx/3msa75a6/

【问题讨论】：

我不明白你的意思：你需要链接到一个新页面并说你想使用锚点？？如果你想链接到一个新页面，你只需要使用一个标签。

标签： html css image hyperlink anchor

【解决方案1】：

这是因为图片在链接中浮动，导致链接大小为 0x0。而是浮动链接本身（并添加display: block;）：http://jsfiddle.net/3msa75a6/1/（我还将overflow: hidden;添加到.work作为“clearfix”+删除了您可能想要添加回来的媒体查询）

.work a {
    display: block;
    float: left;
    max-width: 25%;
}

.work img {
    display: block;
    max-width: 100%;
}

编辑：图像上的display: block; 会忽略line-height 等（尝试不使用，您会看到一些间距）

【讨论】：

没有必要为浮动链接添加display:block，因为float 已经在此上下文中暗示了它。（见w3.org/TR/CSS21/visuren.html#dis-pos-flo）
谢谢！工作正常，虽然当我把媒体查询放回去时，它似乎有点不对劲？？ @powerbuoy
因为媒体查询中的 CSS 是针对图像的。更改它，使其以链接为目标。
@CBroe 我不知道。为了清楚起见，我总是添加它，但可能只需要停止 :)
@powerbuoy：不，别担心，它也不疼。（此外，在某些情况下，您可能希望在小屏幕的媒体查询中通过 float:none 删除浮动，并且仍然让元素接受 width 或 height - 然后它可能会派上用场，如果该元素已经设置了display:block。）

【解决方案2】：

你唯一的问题是在 HTML 中你使用了不存在的元素，例如

<div class="container">
       <img src="http://walshx.com/portfolio/img/logo.png" id="logo">
 </container>

</container> 显然应该是 </div>。您也可以使用 footer 来执行此操作。

在我更正了你的 HTML 之后，我不需要触摸 css 就可以按照你想要的方式工作 http://jsfiddle.net/3msa75a6/7/

【讨论】：