Question

我有一个简单的portfolio，它有一个图像网格，最终会起作用。我想让图像链接到另一个页面，并在点击时提供有关每个项目的更多信息。

由于某种原因，锚标记的行为与链接不同，您无法单击它们。

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

这是一个JS小提琴 - http://jsfiddle.net/tomwalshx/3msa75a6/

Answer 1

这是因为图像浮动在链接内部，使链接大小为0x0。而是自己浮动链接（并添加display: block;）：http://jsfiddle.net/3msa75a6/1/（我还将overflow: hidden;添加到.work作为＆＃34; clearfix＆＃34; +删除媒体查询你可能想要加回来）

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

锚标记的图像不像链接

2 个答案: