Wie erstelle ich ein anklickbares Div mit variablen Bildgrößen in HTML/CSS?

Erstellen eines gesamten Div-Hyperlinks in HTML/CSS

Problem:

Erstellen eines Hyperlinks für ein vollständiges Div (# parentdivimage) mit unterschiedlichen Bildgrößen (alle unter 180x235). Das Div hat einen Rahmen und vertikal ausgerichtete Bilder.

Lösung:

Es sind drei Hauptoptionen zu berücksichtigen:

1. Semantisch falsch (aber funktionsfähig):

<code class="html"><a href="http://google.com">
  <div>...</div>
</a></code>

Diese Methode funktioniert technisch gesehen, verstößt jedoch gegen die HTML-Semantik.

2. Semantisch korrekt (unter Verwendung von JS):

<code class="html"><div style="cursor: pointer;" onclick="window.location='http://google.com';">...</div></code>

Diese Methode ist semantisch korrekt, basiert jedoch für die Funktionalität auf JavaScript.

3. Semantisch korrekt (Nicht-Div-Link):

<code class="html"><a href="http://google.com">
  <span style="display: block;">...</span>
</a></code>

Diese Methode ist sowohl semantisch korrekt als auch funktional, ändert jedoch das Wrapper-Element von einem Div in ein Span.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein anklickbares Div mit variablen Bildgrößen in HTML/CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!