Home > Article > Web Front-end > How to Create a Clickable Div with Variable Image Sizes in HTML/CSS?
Problem:
Creating a hyperlink for a complete div (#parentdivimage) with varying image sizes (all under 180x235). The div has a border and vertically-aligned images.
Solution:
There are three primary options to consider:
1. Semantically Incorrect (But Functional):
<code class="html"><a href="http://google.com"> <div>...</div> </a></code>
This method technically works but violates HTML semantics.
2. Semantically Correct (Using JS):
<code class="html"><div style="cursor: pointer;" onclick="window.location='http://google.com';">...</div></code>
This method is semantically correct but relies on JavaScript for functionality.
3. Semantically Correct (Non-Div Link):
<code class="html"><a href="http://google.com"> <span style="display: block;">...</span> </a></code>
This method is both semantically correct and functional, but it changes the wrapper element from a div to a span.
The above is the detailed content of How to Create a Clickable Div with Variable Image Sizes in HTML/CSS?. For more information, please follow other related articles on the PHP Chinese website!