我有一个简单的作品集 ,其中包含一些图像网格,这些图像最终将起作用。 我希望图像链接到另一个页面,并在单击时提供有关每个项目的更多信息。

由于某些原因,定位标记的作用不像链接,因此您无法单击它们。

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

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

===============>>#1 票数:2 已采纳

这是因为图像漂浮在链接内部,从而使链接的大小为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高等被忽略(尝试不使用时,您会看到一些间距)

===============>>#2 票数:0

您唯一的问题是在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/

  ask by user3416331 translate from so

未解决问题?本站智能推荐:

3回复

使用图像作为可点击的锚链接

我有一个由几个图像组成的Sidenav。 我希望这些图像是指向同一页面上各个部分的链接-锚链接。 但是,我似乎无法正常工作。 这是我的HTML: 这是#nav2的样式: 提前致谢! :-)
3回复

如何将标签放在另一个(更大) 标签上?

情况就是这样:我在页面中有一系列缩略图,当用户将光标悬停时,我想在每个图像上显示几个关键字。 这些关键字中的每一个都是指向搜索查询的锚标签。 每个缩略图(图像)也应该是可点击的(通过关键字留下的空白区域)并指向特定页面。 我已经编码了所有内容,我只是错过了在图像锚点上显示关键字锚点的方
1回复

即使更改了z-index,锚标签也无法正常工作

即使将简单的锚标记置于z-index的顶部,它也不会跟随该链接 HTML CSS
1回复

锚链接链接到页面上的错误位置

我在主导航中的主页上有一个指向div的链接。 但是,该链接在页面的更下方。 在Firefox中似乎可以正常运行,但在Chrome中却不能。 链接在这里: http://purplecubed.com/home#what-we-do 有任何想法吗? 谢谢
1回复

EXTJS:更改访问过的链接

我是ExtJS的新手。 我们正在使用ExtJs客户端和struts,在服务器端弹出。 在我们的应用程序中,所有链接过去都以蓝色显示。 不知何故,由于几乎没有变化,访问过的链接无法改变为不同的颜色。 有人可以建议我改变访问链接颜色的方法吗?
4回复

链接在分层div中不起作用

我一直在试图找出如何让我的链接在分层div中工作 我有一个包含两个其他div的大div: 主要内容和内容 我的菜单的导航div 问题是main div与导航div重叠,其中我希望我的链接是(色带),这样看起来它们在悬停时被拉出。 但它们根本不是活跃的链接? 我
1回复

链接和格式,HTTP会有所作为吗?

因此,这就是我希望所有链接都显示在页面上的方式: DIV中的垂直导航菜单除外,该菜单的链接具有白色和绿色背景(悬停时为蓝色)。 注意:此navMenu仅链接到我网站上的其他页面(“ home.html”,“ contact.html”等),并使用相对路径(即-仅文件名)。 因此
4回复

单击锚链接将整个页面移到顶部

所以我有这个网页隐藏了整个html的溢出 然后我有一个带有锚链接的导航栏和一个div的内容具有自动溢出功能,因此它是可滚动的。 导航: 内容div: 现在,我的问题是,当您单击导航栏上的链接(例如jazz)时,整个页面都移到顶部,所有内容:导航栏,div内容以及di
1回复

如何设置HTML片段链接到的页面多远?

使用/#page-section链接到页面的特定部分的使用页面链接的HTML片段对我来说,该元素的加载太低了。 例如,我设置了一个<div id="engagment"> ,然后链接到site.com/#engagement但不是这样,它链接到本节的顶部: 我想发生的事情
2回复

您如何直接更改链接行为?

这是我在这里的第一篇文章。 我想要做的是更改鼠标悬停在链接上时链接的行为。 我不想使用任何样式表,只需直接将其直接添加到锚标记中即可。 像这样: 有任何想法吗? 谢谢 :)