如何将含图片与文本的div容器整体设置为可点击链接？

下面提供两种简单可行的方案，帮你实现整个卡片区域可点击的需求：

方法1：用<a>标签包裹整个卡片内容 #

HTML5允许<a>标签包含块级元素，直接把卡片内所有内容都放到<a>标签里，就能让整个区域触发链接跳转。修改后的代码如下：

<div id="advice-card">
    <a href="tyres.html" style="display: block; text-decoration: none; color: inherit;">
        <span id="title">How long do tyres last for?</span>
        <div id="advice-card-media">
            <img src="assets/images/car-tyres.jpg" alt="Single tyre with dark background" height="240" width="240">
        </div>
        <div id="advice-card-content">
            Here we go through how long car tyres last and what to look for when buying new tyres.
        </div>
    </a>
</div>

补充说明：添加display: block让<a>占满整个卡片空间，text-decoration: none去掉默认下划线，color: inherit继承父元素文字颜色，避免链接样式破坏卡片原有设计。

方法2：用JavaScript绑定点击事件 #

如果没法修改现有HTML结构，可通过JS给卡片容器绑定点击事件，点击时自动跳转到目标链接：

document.getElementById('advice-card').addEventListener('click', function() {
    window.location.href = 'tyres.html';
});

优化细节：可以给卡片加个悬停光标提示，让用户知道这是可点击区域，在CSS里添加：

#advice-card {
    cursor: pointer;
}

内容的提问来源于stack exchange，提问作者cameron.g