HTML/CSS中用于整个div的超链接a href链接

Question

HTML/CSS中用于整个div的超链接a href链接

180

以下是我在HTML/CSS中想要实现的内容：

我有不同高度和宽度的图片，但它们都小于180x235。因此，我想创建一个带有边框且 vertical-align: middle 的 div ，并将所有图片放在其中。我已成功完成了这一步骤，但现在我遇到了如何正确地为整个 div 创建超链接的问题。

这是我的代码：

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

请注意，为了方便在此处复制粘贴，样式代码是内联的。

我在某处读到可以简单地添加另一个父div在代码上面，然后在其中添加一个href链接。但是，根据一些研究，这不会是有效的代码。

因此，再次总结一下，我需要整个div（`＃parentdivimage`）成为href链接。

- Adil

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DaveW · Answer 1

我会在标签内放置一个，将设置为块级元素，并为添加大小，或者直接将样式应用于标签。一定要在标签的样式中处理位置。在标签中添加，JavaScript将捕获事件，然后在JavaScript事件的结尾处返回false，以防止默认操作的href和点击事件的冒泡。这适用于启用或禁用JavaScript的情况，并且可以在Javascript监听器中处理任何AJAX。

如果您正在使用jQuery，则可以使用此作为侦听器并省略标记中的。

$('#idofdiv').live("click", function(e) {
    //add stuff here
    e.preventDefault; //or use return false
});

这使您可以根据需要将监听器附加到任何更改的元素。

- MDI · Answer 2

带有<div>标签的链接：

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

一个带有<a>标签的链接：

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>