コンテンツを持たないDivにリンクを追加

Question

私はdivでグリッドを作成していますが、divは空です。私がしたいのは、これらのdivにリンクを追加することだけです。別のリンクを持っている）。

HTMLのdivにリンクを追加しようとしましたが、divが消えました。

divでJS o Jqueryを使用してリンクを追加することはできますか？私は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要素フレックスアイテムなので、あなたが今、アンカーにそれらのフレックスのアイテムをラップするとき、それは今のアンカー以来、Flexプロパティに来るとき、あなたの#proj1ルールはもはや適用されませんフレックスアイテムとなった。

フレックスアイテム（アンカー）の幅が変更されていないため、ほとんど無くなってしまいます（最初の行のイメージがシフトされて表示されます）もう少し右に移動し、最初の画像のすぐ左にマウスを置くと、カーソルが変更され、そこをクリックすることができます）

フレックスアイテムに設定することをお勧めしますこれは、画像に余分な要素を持つ必要がないためです。

idは一意にする必要があるため、クラスにも変更しました。

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 */ 
 
}

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

Answer 2

ハイパーリンク（<a>）は、コンテンツがある場合にのみ表示されます。空の<div>を<a>に入れると、誰でもクリックするコンテンツがなくなるため、何も表示されません。また、divにはaが含まれている必要があります。

有効な構造の例が、クリックする何も：

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

をクリックしてコンテンツを持つ有効な構造の例：

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

コンテンツがないdivを使用しているため、高さがゼロになるため、divで作成された空の行をクリックすることはできませんが、divにサイズ（CSS付き）を強制すると、クリックするスペース。

また、アンカーが空であるため、幅はなく、同様に、誰でもクリックできるサイズはありません。しかし、あなたは幅を強制することができます。

要素の高さと幅を強制することによってこの作業を行う方法については、この例とCSSコメントを参照してください。あなたはdiv要素ではなく、リンクの内側のdiv内のリンクを配置する必要があり

/* 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;}

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

Answer 3

。

コードは次のようでなければなりません：あなたはここのようにそれを行うことができます

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

Answer 4

：

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

私はにdiv要素をaタグを入れて作るためにそれらにdisplay: block; width: 100%; height: 100%;を適用それらが親DIVの全領域を満たすことを確認してください。 （aのタグはデフォルトではインライン要素なので、それがなければスペースを占有しません。これもあなたの問題の原因です - DIVをaタグでラップすると、リンクはサイズのないインライン要素になります）

Answer 5

CSSでdivのためheightとwidthを設定します。
タグにdivを追加します。