如何让HTML中cards-wrapper内的card div垂直排列而非横向并排？

修改后的完整CSS代码 #

.cards-wrapper {
    display: flex;
    flex-direction: column; /* 改为纵向排列卡片 */
    align-items: center; /* 让卡片在容器内水平居中 */
    width: 90vw; /* 保留原宽度，也可改为fit-content自适应卡片宽度 */
    margin: 0 auto;
    padding: 2% 1%; /* 增大上下内边距，让背景更贴合卡片 */
    background-color: var(--colour-element-hover);
    border-radius: var(--bord-rad);
    box-shadow: var(--shadow);
    gap: 1%; /* 统一设置卡片间的垂直间距 */
}

.card {
    display: flex;
    flex-direction: column; /* 让卡片内的文字和图片垂直排列 */
    align-items: center; /* 卡片内内容水平居中 */
    width: fit-content; /* 卡片宽度自适应内部内容 */
    padding: 1%;
    margin: 0; /* 移除auto margin，改用父容器的gap控制间距 */
    background-color: var(--colour-element-background);
    border-radius: var(--bord-rad);
    box-shadow: var(--shadow);
}

.card img {
    width: 500px; /* 把图片宽度移到CSS中，更规范 */
}

关键修改说明 #

• .cards-wrapper部分：
  • 新增flex-direction: column：Flex布局默认主轴为横向，改为纵向后卡片会垂直依次排列
  • 用align-items: center实现卡片水平居中（此时justify-content控制垂直方向对齐，若需要卡片整体垂直居中可额外添加）
  • 新增gap: 1%：替代卡片的margin属性，更简洁地控制卡片间的垂直间距
  • 调整padding：增大上下内边距，确保浅紫色背景能完整包裹所有卡片，避免卡片贴紧容器边缘
• .card部分：
  • 新增flex-direction: column：修正原代码中文本与图片横向并排的问题，让卡片内容垂直排列
  • 将width: 100%改为width: fit-content：卡片宽度自适应内部图片和文字，避免过宽撑满容器
  • 移除margin: 0 auto：改用父容器的gap控制间距，避免布局冲突

优化后的HTML（可选） #

把图片的width属性移到CSS中，让HTML结构更简洁：

<div class="cards-wrapper">
    <div class="card">
        <p>Lorem ipsum</p>
        <img src="../images/placeholder.jpg" alt="占位图">
    </div>
    <div class="card">
        <p>Lorem ipsum</p>
        <img src="../images/placeholder.jpg" alt="占位图">
    </div>
</div>

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