如何用HTML/CSS让卡片铺满整个div容器？

我在搭建网站时创建了两张卡片，想要让它们铺满整个父级div，但调整宽度时总会导致卡片尺寸过大。理想状态是让卡片高度更短、宽度更长，刚好铺满div。以下是当前效果图、期望效果图及相关代码，求指导！

当前代码 #

CSS 代码 #

.alignment {
    display: flex;
    justify-content: space-between;
    column-gap: 2%;
    padding-bottom: 6%;
}

.container {
    padding: 2px 16px;
    height: 20%;
    width: 100%;
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 5px 13px 0 #000;
    border-radius: 15px;
    background-color: #121212;
    border-color: #121212;
    flex-grow: -1;
    width: 30%;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 000;
}

.card img {
    border-radius: 15px 15px 0px 0px;
}

.card h3 {
    padding-top: 30px;
}

.card h4 {
    padding-top: 20px;
    margin-bottom: 24px;
}

#content > div.news > div.alignment.show > div:nth-child(1) > div > h4 {
    text-align: left;
    font-size: 28px;
    margin-bottom: 24px;
}

#content > div.news > div.alignment.show > div:nth-child(1) > div > p {
    text-align: left;
    font-size: 18px;
}

#content > div.news > div.alignment.show > div:nth-child(2) > div > h4 {
    text-align: left;
    font-size: 28px;
    margin-bottom: 24px;
}

#content > div.news > div.alignment.show > div:nth-child(2) > div > p {
    text-align: left;
    font-size: 18px;
}

.card p {
    margin-top: -8px;
}

.card .link-a {
    margin-bottom: 16px;
}

HTML 代码 #

<div class="alignment">
    <div class="card">
        <img src="image.png" alt="Avatar">
        <div class="container">
            <!-- <h3 style="margin-bottom: 10px;"><span class="small">Lorem Ipsum</span></h3> -->
            <h4>Lorem Ipsum</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p class="link-a" style="font-size: 15px;"><a href="next-best-actions">CTA Link</a></p>
        </div>
    </div>
    <div class="card">
        <img src="image.png" alt="Avatar" style="">
        <div class="container">
            <!-- <h3 style="margin-bottom: 10px;"><span class="small">Lorem Ipsum</span></h3> -->
            <h4>Lorem Ipsum</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p class="link-a" style="font-size: 15px;"><a href="next-best-actions">CTA Link</a></p>
        </div>
    </div>
</div>

效果对比 #

当前效果 #

期望效果 #

解决方案 #

针对你的问题，调整以下几点即可实现需求：

1. 调整卡片的flex属性与宽度

   • 把.card中的flex-grow: -1改成flex-grow: 1，让卡片自动填充父容器剩余空间；同时将width: 30%替换为width: calc(50% - 1%)（因为有2%的column-gap，平分后每张卡片占50%减去1%的间隙）。
     修改后的.card样式：

   .card {
       box-shadow: 0 5px 13px 0 #000;
       border-radius: 15px;
       background-color: #121212;
       border-color: #121212;
       flex-grow: 1;
       width: calc(50% - 1%);
   }
   

2. 控制卡片图片高度，压缩卡片垂直尺寸

   • 给.card img设置固定高度和宽度100%，并使用object-fit: cover保证图片比例不变且铺满容器，避免图片过高拉长卡片：

   .card img {
       border-radius: 15px 15px 0px 0px;
       width: 100%;
       height: 120px; /* 可根据需求调整高度 */
       object-fit: cover;
   }
   

3. 优化容器内间距，减少垂直空白

   • 减小.container的上下padding，同时调整h4的内边距和外边距，压缩垂直方向的空白：

   .container {
       padding: 8px 16px; /* 减少上下内边距 */
       width: 100%;
       box-sizing: border-box; /* 确保padding不会超出卡片宽度 */
   }
   
   .card h4 {
       padding-top: 10px; /* 减少顶部内边距 */
       margin-bottom: 12px; /* 减少底部外边距 */
   }
   

4. 修正hover阴影语法错误

   • 原.card:hover中的box-shadow: 0 8px 16px 0 000缺少颜色值的#，改成box-shadow: 0 8px 16px 0 #000。

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