Html 在没有内容的Div上添加链接

我用Flex创建了一个div网格，div是空的，我只想在这些div上添加一个链接（在单个图像上，每个图像都应该有不同的链接）

我试图在HTML中的div上添加链接，但div消失了

是否可以使用JSO Jquery在div上添加链接？我用HTML尝试了很多方法，但都没有结果

这是网格的代码：

HTML

我试图以这种方式添加链接，但链接消失：

<div class="contenitor-projects">
  <div class="row1-projects">
    <a href="http://www.link.com"><div id="proj1"></div></a>
    <div id="proj2"></div>
    <div id="proj3"></div>
    <div id="proj4"></div>
    <div id="proj1"></div>
    <div id="proj2"></div>
    <div id="proj3"></div>
    <div id="proj4"></div>
  </div>
</div>

---

超链接（

超链接（

您必须将链接放在div中，而不是将div放在链接中

代码应该如下所示：

<div id="proj1"><a href="http://www.link.com">Link</a></div>

---

您必须将链接放在div中，而不是将div放在链接中

代码应该如下所示：

<div id="proj1"><a href="http://www.link.com">Link</a></div>

---

您可以按如下方式操作：

---

我将

a

标记放入DIV，并将

display:block；width:100%；height:100%；

应用于它们，以确保它们填满父DIV的整个空间。（

a

标记默认为内联元素，因此如果没有它，它们将不会占用任何空间。这也是您出现问题的原因-如果使用a标记包装DIV，链接将成为没有任何大小的内联元素）

您可以按如下方式执行：

---

我将

a

标记放入DIV，并将

display:block；width:100%；height:100%；

应用于它们，以确保它们填满父DIV的整个空间。（

a

标记默认为内联元素，因此如果没有它，它们不会占用任何空间。这也是问题的原因-如果用a标记包装DIV，链接将成为无大小的内联元素）

您的

row1项目

元素是一个flex容器，您的

proj1

元素是flex项目，因此当您现在用锚点包装这些flex项目时，您的

#proj1

规则在涉及flex属性时将不再适用，因为现在锚点成为flex项目

由于新的flex项目（锚定）现在没有宽度，它们将几乎没有折叠（如果您签入小提琴，您将看到第一行中的图像向右移动了一点，如果您将鼠标立即设置到第一个图像的左侧，您将看到光标改变，您可以单击那里）

我建议您将锚点设置为flex项目，就像这样，因为图像不需要任何额外的元素

由于

id

应该是唯一的，所以我也将它们更改为类

html，正文{
边际：0px；
填充：0；
}
.contenitor项目{
高度：100vh；
}
.row1项目{
显示器：flex；
证明内容：中心；
对齐项目：居中；
柔性流：行换行；
}
.proj1{
背景：url（“http://lorempixel.com/400/200）居中不重复；
背景尺寸：封面；
弹性：1025%；
/*加上这个*/
高度：计算（100vh/3）；
保证金：3倍；
/*加上这个*/
}
.proj2{
背景：url（“http://lorempixel.com/400/200）居中不重复；
背景尺寸：封面；
弹性：1025%；
/*加上这个*/
高度：计算（100vh/3）；
保证金：3倍；
/*加上这个*/
}
.项目3{
背景：url（“http://lorempixel.com/400/200）居中不重复；
背景尺寸：封面；
弹性：1025%；
/*加上这个*/
高度：计算（100vh/3）；
保证金：3倍；
/*加上这个*/
}
.项目4{
背景：url（“http://lorempixel.com/400/200）居中不重复；
背景尺寸：封面；
弹性：1025%；
/*加上这个*/
高度：计算（100vh/3）；
保证金：3倍；
/*加上这个*/
}

---

您的

row1项目

元素是一个flex容器，您的

proj1

元素是flex项目，因此，当您现在用锚点包装这些flex项目时，您的

proj1

规则在涉及flex属性时将不再适用，因为现在锚点成为flex项目

由于新的flex项目（锚定）现在没有宽度，它们将几乎没有折叠（如果您签入小提琴，您将看到第一行中的图像向右移动了一点，如果您将鼠标立即设置到第一个图像的左侧，您将看到光标改变，您可以单击那里）

我建议您将锚点设置为flex项目，就像这样，因为图像不需要任何额外的元素

由于

id

应该是唯一的，所以我也将它们更改为类

html，正文{
边际：0px；
填充：0；
}
.contenitor项目{
高度：100vh；
}
.row1项目{
显示器：flex；
证明内容：中心；
对齐项目：居中；
柔性流：行换行；
}
.proj1{
背景：url（“http://lorempixel.com/400/200）居中不重复；
背景尺寸：封面；
弹性：1025%；
/*加上这个*/
高度：计算（100vh/3）；
保证金：3倍；
/*加上这个*/
}
.proj2{
背景：url（“http://lorempixel.com/400/200）居中不重复；
背景尺寸：封面；
弹性：1025%；
/*加上这个*/
高度：计算（100vh/3）；
保证金：3倍；
/*加上这个*/
}
.项目3{
背景：url（“http://lorempixel.com/400/200）居中不重复；
背景尺寸：封面；
弹性：1025%；
/*加上这个*/
高度：计算（100vh/3）；
保证金：3倍；
/*加上这个*/
}
.项目4{
背景：url（“http://lorempixel.com/400/200）居中不重复；
背景尺寸：封面；
弹性：1025%；
/*加上这个*/
高度：计算（100vh/3）；
保证金：3倍；
/*加上这个*/
}

---

设置css中div的高度和宽度。

---

将div添加到标签中

为css中的div设置

高度

和

宽度。

将div添加到标签中
@Johannes，当你留下评论时，我正在更新我的答案。请参见
<div id="proj1"><a href="http://www.link.com">Link</a></div>