使用HTML将href添加到整个div

我想把整个div链接到microsoft.com。如何向整个div包装促销添加链接？我想让它在任何用户点击的地方都能找到链接

以下是我的JSFIDLE：

这是我的HTML：

<div class="wrapper-promo">
    <div class="title-top">
        <h2 class="block-title">
            Three states or less</h2>
    </div>
    <div class="promo-content">
        <p>Bid and RFP Notification Only</p>
    <p>Online and email support</p>
        <p><a href="http://www.microsoft.com"><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></a></p>
    </div>

---

不要使用

div

，只需将

a

与

display:block一起使用即可

它将作为流中的块元素，您可以设置
href
等

您可能需要覆盖其
颜色
、
文本装饰
和
：已访问
CSS


这里的另一种方法是使用带有Javascript-blech的click事件


代码请求编辑：

您只需更改
.wrapper promo
的样式即可：

.wrapper-promo {
    background-color: #e2e3e4;
    display:block;
    margin: 10px 0;
    text-decoration: none;
    width: 100%;
}

然后将其更改为
a
：

<a class="wrapper-promo" href='http://www.google.com/'>
...
</a>

我建议添加一个空锚元素作为
.wrapper promo
元素的直接子元素。然后，您可以绝对地将其相对于父元素进行定位，以便它将采用父元素的任何维度

这样，整个元素都是可单击的，您不必担心将
a
元素包装在任何
div
或块级元素周围：


使用HTML5，即使a标记是内联元素，也允许在标记中包装块元素。这里有一个小提琴，您的原始链接被用作所有其他元素的容器。


哪个
div
？您是在谈论
.wrapper promo
？是的.wrapper promo div
元素使用
href
不是
元素的有效属性…一百万美元表示用户并不真正想访问“microsoft.com”Ha！我从来没有想过这是可能的！现在我将继续删除我的答案…@user3075987点击示例！他确实表现得很好fiddle@user3075987我会让你轻松的那是他的小提琴。。。
<a class="wrapper-promo" href='http://www.google.com/'>
...
</a>

.wrapper-promo {
  position: relative;
}
.wrapper-promo > a {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}

<div class="wrapper-promo">
  <div class="title-top"><!-- ... --></div>
  <div class="promo-content"><!-- ... --></div>
  <a href="http://www.microsoft.com"></a>
</div>

<a class="blockLink" href="http://www.microsoft.com">
  <div class="wrapper-promo">
    <div class="title-top">
      <h2 class="block-title">
        Three states or less
      </h2>
    </div>
    <div class="promo-content">
      <p>Bid and RFP Notification Only</p>
      <p>Online and email support</p>
      <p>
        <img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" />
      </p>
    </div>
  </div>
</a>