HTML/CSS中整个div的href链接

Question

这是我想在HTML/CSS中完成的任务:

我有不同高度和宽度的图像,但它们都低于180x235.所以我想做的就是创建一个divwith border和vertical-align: middleall.我已经成功地做到了这一点,但现在我被困在如何正确地将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

更新06/10/2014:在HTML5中使用div内部的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.

Answer 2

为什么不剥离<div>元素并用替换它<a>？正因为定位标记不是一个div并不意味着你不能与它的样式display:block,高度,宽度,背景,边框,等等.你可以把它看起来像一个div,但仍然起到像一个链接.然后,您不依赖于某些用户可能无法启用的无效代码或JavaScript.

Answer 3

像这样做:

Parentdivimage应具有指定的宽度和高度,其位置应为:

position: relative;

就在parentdivimage内部,在父包含的其他div旁边,你应该放:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

然后在css文件中:

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

span标签将填充其父块,即parentdiv,因为高度和宽度设置为100%.由于将z-index设置为高于其他元素,因此Span将位于所有周围元素的顶部.最后跨度将是可点击的,因为它在'a'标签内.