Razor Pages循环生成Div无法垂直堆叠的CSS问题

以下是针对你遇到的Div无法垂直堆叠问题的排查方向和解决方案：

1. 修正父元素布局上下文 #

如果之前给父元素设置了position: absolute，会导致父元素脱离文档流，子元素的垂直排列失去参照。优先恢复正常文档流布局，推荐用Flex实现稳定的垂直堆叠：

/* 父容器样式 */
.item-parent {
  display: flex;
  flex-direction: column; /* 强制子元素垂直排列 */
  gap: 1rem; /* 可选，添加行间距避免拥挤 */
}

如果用Grid布局，确保网格行设置正确：

.item-parent {
  display: grid;
  grid-template-rows: repeat(3, auto); /* 三行自适应内容高度 */
  gap: 1rem;
}

2. 排查子元素的定位/浮动属性 #

检查secondItemRow和thirdItemRow是否设置了position: absolute、float: left/right这类会脱离文档流的属性，这些属性会导致元素重叠或并排。直接移除这些属性即可恢复正常堆叠；如果必须用浮动，给父元素添加 clearfix 清除浮动影响：

.item-parent::after {
  content: "";
  display: table;
  clear: both;
}

3. 确认Razor渲染后的HTML结构 #

通过浏览器F12开发者工具查看实际渲染的HTML，检查是否存在Razor代码生成的额外嵌套容器、闭合标签错误等问题。比如循环渲染时是否误将子元素包裹到了错误的层级，导致布局被打乱。

4. 避免父元素高度限制 #

如果父元素设置了固定高度（如height: 200px），当子元素总高度超过父元素时会出现重叠。改用min-height让父元素自适应内容高度：

.item-parent {
  min-height: fit-content;
}

完整示例代码 #

Razor Pages 代码：

<div class="item-parent">
  <div class="item-row firstItemRow">第一行内容</div>
  <div class="item-row secondItemRow">第二行内容</div>
  <div class="item-row thirdItemRow">第三行内容</div>
</div>

CSS 代码：

.item-parent {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
}

.item-row {
  padding: 1.2rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

内容的提问来源于stack exchange，提问作者S.Galanti