HTML / CSS中整个div的href链接

这是我要在HTML / CSS中完成的工作：

我有不同高度和宽度的图像，但是它们都在180x235以下。所以我要做的是创建一个divwith 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链接。

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。

您为什么不去除<div>元素并替换为<a>呢？正因为定位标记不是一个div并不意味着你不能与它的风格display:block，高度，宽度，背景，边框，等等。你可以把它看起来像一个div，但仍然起到像一个链接。这样一来，您就不必依赖某些用户可能未启用的无效代码或JavaScript。

像这样做：

Parentdivimage应该具有指定的宽度和高度，并且其位置应为：

position: relative;

在parentdivimage内，应该在parent包含的其他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;
}

由于高度和宽度设置为100％，span标签将填写其父块parentdiv。由于将z-index设置为高于其他元素，因此跨度将在所有周围元素的顶部。最后，跨度将是可单击的，因为它在'a'标记内。

您可以做两件事：

1. 更改#childdivimage为span元素，然后更改#parentdivimage为锚标记。这可能需要您添加一些样式以使外观看起来完美。 之所以这样，是因为它使用语义标记，并且不依赖javascript。

2. 使用Javascript将click事件绑定到#parentdivimage。您必须通过window.location在此事件内部进行修改来重定向浏览器窗口。这是TheEasyWay ^TM，但不会正常降级。

按照《超现实的梦想》所说，最好按照我的经验来设计锚标签的样式，但这确实取决于您的工作。这是一个例子：

HTML：

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

然后是CSS：

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css，输出

做div的id="childdivimag"一个span替代，并包裹在一个a元素。由于默认情况下，span和img是串联元素，因此保持有效，而a div是块级元素，因此包含在中时无效标记a。

放在display:block锚元素上。和/或zoom:1；

但是您应该真正做到这一点。

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

我要做的是将跨度放置在<a>标签内，将跨度设置为block，然后为跨度添加大小，或者仅将样式应用于<a>标签。绝对可以处理<a>标签样式中的定位。onclick event在a whereJavaScript中添加会捕获该事件，然后在JavaScript事件结束时返回false，以防止的默认操作href和点击的冒泡。这在启用或不启用JavaScript的情况下都有效，并且可以在Javascript侦听器中处理任何AJAX。

如果您使用的是jQuery，则可以将其用作侦听器，并onclick在a标记中省略。

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

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

带有<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>

这可以通过许多方式来完成。一个。使用嵌套在标签内。

<a href="link1.html">
   <div> Something in the div </div>
 </a>

b。使用内联JavaScript方法

<div onclick="javascript:window.location.href='link1.html' "> 
  Some Text 
</div>

C。在标签内使用jQuery

HTML：

<div class="demo" > Some text here </div>

jQuery的：

$(".demo").click( function() {
  window.location.href="link1.html";
 });