html - HTML/CSS 中整个 div 的 href 链接

Question

这是我试图用 HTML/CSS 完成的:

我有不同高度和宽度的图片，但它们都在 180x235 以下。所以我想做的是用 border 和 vertical-align: middle 创建一个 div。我已经成功地做到了这一点，但现在我还在研究如何正确地使用 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 链接。

Answer 1

UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.

您需要在以下场景中进行选择:

<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。