Question

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

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

是否可以使用JS o Jquery在div上添加链接？我在很多方面尝试过使用HTML但没有结果。

这是网格的代码：

https://jsfiddle.net/matteous1/3w9Lymwz/

HTML

<div class="contenitor-projects">
  <div class="row1-projects">
    <div id="proj1"></div>
    <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>

CSS

 body, html {
margin:0px;
padding: 0;
}
.contenitor-projects {

  height:100vh;
}
.row1-projects {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:row wrap;
}

#proj1 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%; /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj2 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%; /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj3 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%;  /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj4 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%;  /* add this */ 
height:calc(100vh / 3); 
margin:3px; /* add this */
}

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

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

Answer 1

您的row1-projects元素是一个弹性容器，而您的proj1元素会弹出项目，所以当您现在用锚点包装这些弹性项目时，您的#proj1规则不会适用当涉及到柔性属性时，因为现在锚成为柔性物品。

由于新弹性项目（锚点）现在没有宽度，它们几乎不会崩溃（如果你检查你的小提琴，你会看到第一行中的图像向右移动一点，如果您将鼠标立即设置在第一个图像的左侧，您将看到光标发生变化，您可以单击那里）

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

由于id应该是唯一的，我还将它们更改为类。

＆＃13;

html, body {
  margin: 0px;
  padding: 0;
}

.contenitor-projects {
  height: 100vh;
}

.row1-projects {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}

.proj1 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  height: calc(100vh / 3);
  margin: 3px;
  /* add this */
}

.proj2 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  height: calc(100vh / 3);
  margin: 3px;
  /* add this */
}

.proj3 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  height: calc(100vh / 3);
  margin: 3px;
  /* add this */
}

.proj4 {
  background: url("http://lorempixel.com/400/200") center center no-repeat;
  background-size: cover;
  flex: 1 0 25%;
  /* add this */
  height: calc(100vh / 3);
  margin: 3px;
  /* add this */
}

＆＃13;

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

＆＃13;

Answer 2

超链接（<a>）仅在具有内容时才可见。如果您将空<div>放入<a>，则任何人都无法点击任何内容，因此您将看不到任何内容。此外，div应该包含a，而不是相反。

有效结构的示例，但无需点击：

＆＃13;

<div><a href="http://cnn.com"></a></div>

＆＃13;

包含要点击内容的有效结构示例：

＆＃13;

<div><a href="http://cnn.com">CNN</a></div>

＆＃13;

由于您使用的是没有内容的div，因此它的高度变为零，因此您甚至无法点击div创建的空行，但是您可以强制div上的大小（使用CSS），然后会有一个空格点击。

此外，因为你有一个空锚，它没有宽度，同样，没有任何人可以点击的大小。但是，你可以强制宽度。

请参阅此示例和CSS注释，了解如何通过在元素上强制高度和宽度来实现此功能。

＆＃13;

/* General rule for anchors that will allow you to see that the first two
   don't have any height or width (you don't see any yellow) */
a { background-color:yellow; }

/* You can see that this div first div has no height so instead of a box, you see a
   collapsed line */
#div1 { border:1px solid black;}

/* But, this one does and you do see a box. */
.hasHeight { height:1em; border:1px solid black;}

/* However, neither of those div elements contain an anchor element
   that, itself, has any content. And, since an anchor is an inline
   element, it's width is governed by its content. That's why neither
   of the first two links show any background color. Their widths are zero */
   
/* But, the third anchor has styling to give it the ability to have width and height,
   so, it's empty, but there is space to click on. */
#special { display:inline-block; width:10px; height:10px;}

＆＃13;

<div id="div1"><a href="http://cnn.com"></a></div>

<br>

<div class="hasHeight"><a href="http://cnn.com"></a></div>

<br>

<div class="hasHeight"><a id="special" href="http://cnn.com"></a></div>

＆＃13;

Answer 3

你可以这样做：

https://jsfiddle.net/L1wbgox3/1/

我将a标记放入 DIV并将display: block; width: 100%; height: 100%;应用于它们，以确保它们填充父DIV的整个空间。（默认情况下，a标记是内联元素，因此如果没有这些标记，它们就不会占用任何空间。这也是您遇到问题的原因 - 如果您使用标记包装DIV，链接将变为内联元素没有任何大小）

Answer 4

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

代码应该是：

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

Answer 5

为css中的div设置height和width 在标签中添加div

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

5 个答案: