带有锚标记的图像不像 link

Question

我有一个简单的 portfolio，它有一个图像网格，最终可以使用。我希望图像 link 到另一个页面，单击时包含有关每个项目的更多信息。

由于某些原因，锚标签的行为不像 links，您无法点击它们。

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

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

Answer 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 等被忽略（尝试不这样做，您会看到一些间距）

Answer 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/

带有锚标记的图像不像 link

Images with anchor tag not acting like a link

html

css

anchor

image

hyperlink