HTML/CSS 中整个 div 的 href 链接

Question

这是我试图在 HTML/CSS 中完成的：

我有不同高度和宽度的图像，但它们都在 180x235 以下。所以我想做的是创建一个 div 和 border 和 vertical-align: middle 它们全部。我已经成功地做到了这一点，但现在我被困在如何正确地 href 链接整个 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2014 年 6 月 10 日更新： 在 HTML5 中，在 a 内使用 div 在语义上是正确的。

您需要在以下情况之间进行选择：

 <a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

这在语义上是不正确的，但它会起作用。

 <div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

这在语义上是正确的，但它涉及使用 JS。

 <a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

这在语义上是正确的并且按预期工作但不再是 div。

原文由 Ben 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

为什么不删除 <div> 元素并将其替换为 <a> 呢？仅仅因为锚标记不是 div 并不意味着你不能用 display:block 、高度、宽度、背景、边框等来设置它的样式。你可以让它 看起来 像一个 div 但仍然 充当 链接。那么您就不会依赖某些用户可能未启用的无效代码或 JavaScript。

原文由 Surreal Dreams 发布，翻译遵循 CC BY-SA 2.5 许可协议