HTML/CSS中整个div的href链接

以下是我试图用HTML/CSS实现的目标：

我有不同高度和宽度的图像，但它们都在180x235以下。因此，我要做的是创建一个

div

，其中包含

border

和

vertical align:middle

。我已经成功地做到了这一点，但现在我被困在如何正确地链接整个

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，然后在其中执行a href。然而，根据一些研究，它将不是有效的代码

总之，我需要整个div（

#parentdivimage

）作为href链接

你可以做两件事：

将

#childdivimage

更改为

span

元素，并将

#parentdivimage

更改为锚定标记。这可能需要您添加更多样式，以使事物看起来完美。这是首选，因为它使用语义标记，不依赖javascript

使用Javascript将单击事件绑定到

#parentdivimage

。您必须通过修改此事件中的

窗口位置来重定向浏览器窗口。这是EasywayTM，但不会优雅地降级

2014年10月6日更新：在a中使用div在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。

将

id=“childdivimag”

a

span

的

div

改为

a
元素，并将其包装在
a
元素中。由于
span
和
img
在默认情况下是内嵌元素，因此这仍然有效，而
div
是块级元素，因此当包含在
a
中时，将
显示：块
放在锚元素上是无效的标记。和/或缩放：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}


无论您的alt属性是什么
为什么不去掉
元素，用
替换它呢？仅仅因为锚定标记不是div，并不意味着您不能使用
display:block
、高度、宽度、背景、边框等设置锚定标记的样式。您可以使其看起来像div，但仍然像链接一样。这样，您就不会依赖无效的代码或JavaScript，而这些代码或JavaScript可能无法为某些用户启用。
请这样做：

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

position: relative;

就在parentdivimage内部，在ParentDiv包含的其他Div旁边，您应该放置：

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

span标记将填充其父块parentdiv，因为高度和宽度设置为100%。跨度将位于所有周围图元的顶部，因为将z索引设置为高于其他图元。最后，span将是可点击的，因为它位于“a”标记内。
我要做的是在
标记内放置一个span，将span设置为block，并向span添加大小，或者仅将样式应用于
标记。一定要以
标记样式处理定位。将
onclick事件添加到
a，其中
JavaScript将捕获该事件，然后在JavaScript事件结束时返回false，以防止
href
的默认操作和点击冒泡。这适用于启用或不启用JavaScript的情况，任何AJAX都可以在JavaScript侦听器中处理

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

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

这允许你根据需要将听众附加到任何更改的元素。
根据超现实主义梦想的说法，根据我的经验，可能最好设置锚定标签的样式，但这确实取决于你在做什么。下面是一个例子：

Html:

这可以通过多种方式实现。
A.使用嵌套在标记中

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

带有
标记的链接：

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>


舱里有东西

与

我很惊讶到目前为止还没有人提出这个简单的把戏

如果希望链接覆盖整个
div
，可以创建一个空


div.covered-div{
位置：相对位置；
}
a、 盖环{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}

当使用
创建块节或幻灯片，并且希望整个幻灯片成为链接（而不仅仅是幻灯片上的文本）时，这一点尤其有效。对于
，使用

是的，但这对我不起作用，因为我不希望图像是a href。我想要整个块到a href链接..将childdivimage转换为一个span并将其包装为a并不能实现我想要的功能ep-一个
标记是内联的，而一个
标记是块。将块级标记放在内联标记内是无效的，因此这是错误的根源。您可以使用
span
而不是
div
并使用css的
display:block
使其看起来符合所需和语义。您只需在
标记上设置
display:block
。它将成为一个没有嵌套的块元素。HTML5允许在
标记中嵌套
标记。我认为语义与此无关。它现在是有效的，技术上是正确的，但与语义无关。你能举个例子让我试试吗。谢谢你，但效果不太好
.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;
}

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

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

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

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

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>