如何让<section>内<h1>标题居上，<div>卡片网格置于其下？

核心原因 #

横向排列大概率是.projhero或其子元素（h1/.card-grid）被设置了弹性布局（flex）、**浮动（float）或行内块（inline-block）**属性，导致元素在同一行展示。

具体修复方案 #

情况1：父元素.projhero使用了flex布局 #

如果.projhero的CSS是类似这样：

.projhero {
  display: flex;
}

只需要给flex容器添加垂直方向排列的属性：

.projhero {
  display: flex;
  flex-direction: column; /* 让子元素从上到下垂直排列 */
  gap: 2rem; /* 可选：给标题和卡片网格之间加间距 */
}

情况2：子元素使用了float或inline-block #

如果h1或.card-grid被设置了：

h1, .card-grid {
  float: left; /* 或 display: inline-block; */
}

直接重置这些属性：

.projhero h1 {
  float: none;
  display: block; /* 让标题独占一行 */
}
.projhero .card-grid {
  float: none;
  display: block; /* 卡片网格独占下一行 */
  clear: both; /* 可选：清除浮动影响，避免元素错位 */
}

情况3：通用兜底方案 #

如果不确定具体原因，直接强制子元素换行：

.projhero {
  display: block; /* 确保父元素是块级容器 */
}
.projhero h1 {
  width: 100%; /* 标题占满整行，迫使下一个元素换行 */
  margin-bottom: 1.5rem; /* 可选：添加底部间距 */
}

验证要点 #

修改后刷新页面，确认：

• h1独占<section>顶部一行
• .card-grid完全位于标题下方，无横向重叠

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