HTML / CSSのdiv全体のhrefリンク

これが私がHTML / CSSで達成しようとしていることです：

高さと幅の異なる画像がありますが、すべて180x235未満です。だから私がしたいのはdiv、borderとvertical-align: middleそのすべてを作成することです。私はそれを成功させましたが、今私は適切に全体をhrefリンクする方法に行き詰まっています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を追加し、その中でhrefを実行できることをどこかで読みました。ただし、一部の調査によると、これは有効なコードではありません。

まとめると、div（#parentdivimage）全体がhrefリンクになる必要があります。

UPDATE 06/10/2014： 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ではなくなりました。

<div>要素を取り除いて<a>代わりに置き換えませんか？アンカータグはdiv要素ではないという理由だけで、あなたができないスタイル、それを意味するものではありませんdisplay:blockあなたはそれを作ることができるなど、高さ、幅、背景、境界線を、見て div要素のように、まだ行動するリンクのように。そうすれば、一部のユーザーに対して有効にされない可能性のある無効なコードやJavaScriptに依存しなくなります。

このようにしてください：

Parentdivimageには幅と高さが指定されている必要があり、その位置は次のとおりです。

position: relative;

parentdivimageのすぐ内側に、親が含まれる他のdivの隣に配置する必要があります。

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

次にCSSファイルで：

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

高さと幅が100％に設定されているため、spanタグは親ブロックであるparentdivを埋めます。他の要素よりもZインデックスを高く設定しているため、スパンは周囲のすべての要素の上に配置されます。最後に、スパンは「a」タグの内側にあるため、クリック可能になります。

あなたができる2つのこと：

1. 変更#childdivimageするspan要素、および変更#parentdivimageアンカータグへ。これは、物事を完璧に見せるためにいくつかのスタイリングを追加する必要があるかもしれません。 これは、セマンティックマークアップを使用し、JavaScriptに依存しないため、推奨されます。

2. JavaScriptを使用して、クリックイベントをにバインドします#parentdivimage。window.locationこのイベント内を変更して、ブラウザウィンドウをリダイレクトする必要があります。これはTheEasyWay ^TMですが、正常に低下しません。

Surreal Dreamsの発言を踏まえると、私の経験ではおそらくアンカータグのスタイルを設定するのが最善ですが、それは実際に何をしているのかに依存します。次に例を示します。

HTML：

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

次に、CSS：

.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;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output

作るdivの代わりに、とのそれをラップ要素。ようと一方、このデフォルトのインライン要素であることは、有効なままでブロックレベル要素であり、したがって無効なマークアップ内に含まれます。id="childdivimag"spanaspanimgdiva

display:blockアンカー要素に置きます。および/またはzoom: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}

<a id="parentdivimage">whatever your alt attribute was</a>

<a>タグ内にスパンを配置し、スパンをブロックに設定し、スパンにサイズを追加するか、<a>タグにスタイルを適用するだけです。<a>タグスタイルでの配置を確実に処理します。JavaScriptにを追加するonclick eventと、a whereイベントがキャッチされ、JavaScriptイベントの最後でfalseが返され、デフォルトのアクションとhrefクリックのバブリングが防止されます。これは、JavaScriptが有効になっているかどうかに関係なく機能し、AJAXはJavaScriptリスナーで処理できます。

jQueryを使用している場合は、これをリスナーとして使用onclickして、aタグ内のを省略できます。

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

これにより、必要に応じて変更された要素にリスナーをアタッチできます。

<div>タグ付きのリンク：

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

<a>タグ付きのリンク：

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

これは多くの方法で行うことができます。a。タグ内でネストを使用します。

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

b。インラインJavaScriptメソッドの使用

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

c。タグ内でjQueryを使用する

HTML：

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

jQuery：

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