如何让段落元素垂直排列在 H5 标题正下方（而非并排显示）-html教程-PHP中文网

当使用 display: flex 时，其子元素（如和）会默认水平排列；只需将 article 设为 display: block，即可恢复 HTML 默认的块级垂直流布局，使段落自然位于标题正下方。

当 `

` 使用 `display: flex` 时，其子元素（如 `

` 和 `

`）会默认水平排列；只需将 `article` 设为 `display: block`，即可恢复 html 默认的块级垂直流布局，使段落自然位于标题正下方。

在您当前的 CSS 中，article 被显式设为 display: flex（尽管未在原始代码中写出，但根据行为可推断其继承或被覆盖为 flex），这导致

和

在同一行内并排渲染——即使它们本应是块级元素。根本原因在于：Flex 容器会改变其直接子元素的默认布局行为。

要修复该问题，最简洁、语义正确且符合预期的方式是：

✅ 将 article 的 display 显式设为 block（或直接移除 display: flex 声明，因其默认即为 block）；
❌ 避免对仅需垂直堆叠的简单结构滥用 flex，否则需额外处理 flex-direction、align-items 等属性，反而增加复杂度和意外风险。

以下是推荐的精简 CSS 修改方案（已移除冗余重复声明，并增强可维护性）：

jQuery+CSS3 3D立体图片排列布局代码

下载

.ui-design {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 3%;
}

.ui-design h2,
.ui-design h5 {
  color: black;
  margin: 0; /* 可选：重置默认外边距，提升一致性 */
}

.article-container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 替代 margin-top，更现代、更可控的间距方式 */
}

article {
  display: block; /* ✅ 关键修复：恢复块级流布局 */
}

/* 响应式优化：在中屏及以上改为横向排列 article 组 */
@media (min-width: 768px) {
  .article-container {
    flex-direction: row;
  }
  /* 可选：为横向模式微调子项间距与对齐 */
  .article-container article {
    margin-right: 24px;
  }
  .article-container article:last-child {
    margin-right: 0;
  }
}

⚠️ 注意事项：

不要为 article 设置 align-items: center（除非你明确需要居中对齐内容），它在 display: block 下无效，且可能在误用 flex 时引发意外交互；
若未来需对单个 article 内部做精细控制（如图标+文字垂直居中），建议用 display: flex + flex-direction: column，而非全局应用；
使用 gap 替代 margin-top 是更健壮的间距方案，避免外边距折叠（margin collapse）问题。

总结：HTML 元素天然具有语义化布局倾向——