HTML / CSS中整个div的href链接
这是我想要在HTML / CSS中完成的：
我有不同的高度和宽度的图像，但他们都在180×235。 所以我想要做的是创build一个带border和vertical-align: middle的div vertical-align: middle它们全部放在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链接。
更新06/10/2014：使用div里面的a在HTML5中语义上是正确的。
您需要在以下scheme中进行select：
<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里面，父母包含的其他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”标签内。
你可以做两件事：
-
将
#childdivimage更改为span元素，并将#parentdivimage更改为定位标记。 这可能需要您添加更多样式才能使事物看起来更完美。 这是优先考虑的，因为它使用语义标记，并不依赖于JavaScript。 - 使用Javascript将点击事件绑定到
#parentdivimage。 您必须通过修改此事件中的window.location来redirect浏览器窗口。 这是TheEasyWay TM ，但不会优雅地降级。
从“超现实主义梦想”的说法来看，根据我的经验，最好对锚标签进行风格devise，但这确实取决于你在做什么。 这是一个例子：
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; }
将id="childdivimag"的div作为一个span ，并将其包装在a元素中。 由于span和img默认是内联元素，所以这个保持有效，而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>标签中放置一个span，将span设置为block，然后将大小添加到span，或者只将样式应用于<a>标签。 绝对处理<a>标签样式中的定位。 将一个onclick event添加到JavaScript将捕获事件的位置，然后在JavaScript事件结束时返回false以防止默认的href和点击冒泡。 这适用于启用或未启用JavaScript的情况，并且可以在Javascript侦听器中处理任何AJAX。
如果您使用的是jQuery，那么您可以将其用作您的侦听器，并省略a标签中的onclick 。
$('#idofdiv').live("click", function(e) { //add stuff here e.preventDefault; //or use return false });
这允许您根据需要将侦听器附加到任何更改的元素。
