1. ホーム
  2. html

[解決済み] HTML/CSSでdiv全体にhrefリンクを貼りたい

2022-03-10 13:10:06

質問

以下は、私がHTML/CSSで実現しようとしていることです。

高さ、幅の異なる画像がありますが、すべて180x235以下です。そこで、私がやりたいことは divbordervertical-align: middle をすべて表示します。それはうまくいったのですが、今、どうすれば適切に 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リンクにする。

解決方法は?

<ブロッククオート

2014年10月6日に更新しました。 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 ではありません。