求助：如何调整<div>布局使卡片内姓名与职位正常显示

问题描述 #

我这段代码在<div>相关部分存在错误，希望在卡片盒子内完整显示姓名与职位，尝试调整图片尺寸、div宽高尺寸等方法均无效，想要实现的效果如下：

想要实现的效果：

当前实现的效果：卡片内的姓名和职位被挤出了卡片容器，无法完整显示在盒子内部。

相关代码 #

CSS代码

.card{
    width: 200px;
    height: 200px;
    border: 2px solid black;
    display: inline-block;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px black;
    transition: 1s;
}
.desc{
    padding: 0 2px 0 2px;
}
img{
    width: 100%;
    border-radius: 3px 3px 0 0;
}
.card:hover{
    box-shadow: 0 8px 16px goldenrod;
}

HTML代码

<div class="card">
        <img src="https://via.placeholder.com/200.jpg" alt="man">
        <div class="desc">
            <h3>Rahul Kumar</h3>
            <p>Data Analyst</p>
        </div>
    </div>
    <div class="card">
        <img src="https://via.placeholder.com/200.jpg" alt="woman">
        <div class="desc">
            <h3>Neha Sharma</h3>
            <p>Software Engineer</p>
        </div>
    </div>

解决方案 #

问题根源是你给.card设置了固定的height:200px，图片宽度设为100%（即200px），再加上<h3>和<p>的默认外边距，卡片内部内容总高度超过了200px，导致姓名和职位被挤出容器。以下两种方法可解决问题：

方法一：让卡片自适应内容高度 #

直接移除.card的固定高度设置，让卡片根据内部内容自动调整高度：

.card{
    width: 200px;
    /* 移除固定height */
    border: 2px solid black;
    display: inline-block;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px black;
    transition: 1s;
    /* 可选：确保内容不会溢出边框 */
    overflow: hidden;
}

方法二：使用Flex布局控制内容排列 #

给.card设置垂直方向的flex布局，同时限制图片高度，确保所有内容都能容纳在卡片内：

.card{
    width: 200px;
    height: 200px;
    border: 2px solid black;
    /* 改为flex垂直布局 */
    display: flex;
    flex-direction: column;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px black;
    transition: 1s;
    overflow: hidden;
}
.desc{
    padding: 0 2px 0 2px;
    /* 让描述区域自动填充剩余空间 */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
img{
    width: 100%;
    border-radius: 3px 3px 0 0;
    /* 限制图片高度，避免占用过多空间 */
    height: 120px;
    /* 保持图片比例，避免拉伸变形 */
    object-fit: cover;
}
/* 移除标题和段落的默认外边距，减少多余空间 */
.desc h3, .desc p{
    margin: 4px 0;
    text-align: center;
}

内容的提问来源于stack exchange，提问作者Hari Jha