HTML / CSS中整个div的href链接 [英] a href link for entire div in HTML/CSS

问题描述

这里是我想在HTML / CSS中完成：

Here is what I am trying to accomplish in HTML/CSS:

我有不同高度和宽度的图片，但他们都在180x235。所以我想做的是创建一个 div with border 和 vertical-align：middle 他们全部。我已经成功做到了，但现在我被困在如何正确的href链接整个 div 。

I have images in different heights and widths, but they are all under 180x235. So what I want to do is create a div with border and vertical-align: middle them all. I have successfully done that but now I am stuck on how to properly a href link the entire 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 。然而，根据一些研究，它将不是有效的代码。

I read somewhere that I can simply add another parent div on top of the code and then do a href inside that. However, based on some research it won't be valid code.

因此，为了总结，我需要整个div（ #parentdivimage ）作为href链接。

So to sum it up again, I need the entire div (#parentdivimage) to be a href link.

推荐答案

UPDATE 06/10/2014：

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

You'll need to choose between the following scenarios:

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

这在语义上不正确，但它会工作。

which is semantically incorrect, but it will work.

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

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

which is semantically correct but it involves using JS.

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

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

which is semantically correct and works as expected but is not a div any more.

这篇关于HTML / CSS中整个div的href链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！