如何让 HTML 中的 div 元素垂直堆叠而非水平并排？-html教程-PHP中文网

使用 CSS Flexbox 的 flex-direction: column 可使容器内子元素（如 .card）自上而下依次排列，配合合理宽高与间距控制，即可实现清晰、响应式的垂直布局。

使用 css flexbox 的 `flex-direction: column` 可使容器内子元素（如 `.card`）自上而下依次排列，配合合理宽高与间距控制，即可实现清晰、响应式的垂直布局。

默认情况下，display: flex 的容器会将子元素沿主轴（main axis）水平排列（即 flex-direction: row），因此你的两个 .card 并排显示。要改为垂直堆叠，只需在父容器 .cards-wrapper 上显式指定主轴方向为纵向：

.cards-wrapper {
  display: flex;
  flex-direction: column; /* ? 关键：切换为主轴垂直 */
  justify-content: center; /* 垂直居中所有卡片（在纵向上） */
  align-items: center;     /* ? 推荐添加：水平居中每个卡片（避免宽度撑满时错位） */
  width: 90vw;
  margin: 0 auto;
  padding: 1%;
  background-color: var(--colour-element-hover);
  border-radius: var(--bord-rad);
  box-shadow: var(--shadow);
}

.card {
  display: flex;
  flex-direction: column; /* ? 可选优化：使 card 内部 p 和 img 也垂直排列（更符合语义） */
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;       /* ? 推荐限制最大宽度，防止在大屏上过宽 */
  margin: 1rem 0;         /* ? 使用上下外边距替代 padding，增强卡片间呼吸感 */
  padding: 1rem;
  background-color: var(--colour-element-background);
  border-radius: var(--bord-rad);
  box-shadow: var(--shadow);
}

同时，建议为移除固定 width="500"（HTML 属性易导致响应失效），改用 CSS 控制：

<div class="cards-wrapper">
  <div class="card">
    <p>Lorem ipsum dolor sit amet.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img
														src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a>
													<p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr&#8203;&#8203;oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr&#8203;&#8203;oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p>
												</div>
												<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
    @@##@@
  </div>
  <div class="card">
    <p>Lorem ipsum dolor sit amet.</p>
    @@##@@
  </div>
</div>

.card img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-top: 0.75rem;
}

✅ 注意事项总结：

flex-direction: column 是解决“垂直堆叠”的核心声明，必须加在父容器（.cards-wrapper）上；
justify-content: center 在 column 模式下控制垂直方向上的对齐（即卡片整体在容器中上下居中），若需顶部对齐可改为 flex-start；
align-items: center 确保每个 .card 水平居中，避免因 width: 100% 导致视觉偏移；
避免混合使用内联 width 属性与 CSS 响应式规则，统一交由 CSS 管理更可控；
如后续需支持更多卡片或响应式断点，可结合 gap: 1.5rem 替代手动 margin，语义更清晰且自动处理首尾间距。

这样修改后，所有 .card 将严格自上而下垂直排列，浅紫色背景（.cards-wrapper）完整包裹整个堆叠区域，结构清晰、维护性强，且天然适配移动端。