如何在HTML中实现Div垂直排列并添加纵向滚动？

没问题，我来帮你搞定这三个需求，直接上可落地的代码和解释：

步骤1：调整HTML结构 #

先把所有需要排列的div放到一个容器里，这样方便统一控制滚动和样式：

<div class="vertical-container">
  <div class="item">Some Text 1</div>
  <div class="item">Some Text 2</div>
  <div class="item">Some Text 3</div>
  <div class="item">Some Text 4</div>
  <div class="item">Some Text 5</div>
  <div class="item">Some Text 6</div>
  <div class="item">Some Text 7</div>
</div>

（我把每个div里的竖线去掉了，后面用CSS伪元素来加，这样更容易控制末尾的多余竖线）

步骤2：添加CSS样式 #

下面的CSS会同时实现三个需求：

/* 容器样式：控制纵向滚动 */
.vertical-container {
  height: 200px; /* 自定义你需要的容器高度，比如200px */
  overflow-y: auto; /* 当内容超过容器高度时，自动显示垂直滚动条 */
  border: 1px solid #eee; /* 可选，方便你看到容器范围，不需要可以删掉 */
}

/* 每个item的基础样式 */
.item {
  display: block; /* 确保每个div独占一行，垂直排列（默认div就是block，但如果之前有其他样式覆盖可以加上） */
  padding: 6px 0; /* 可选，增加上下间距，让排版更舒服 */
}

/* 给除了最后一个的item添加竖线，避免末尾多余 */
.item:not(:last-child)::after {
  content: " |"; /* 插入竖线文本 */
  margin-left: 10px; /* 可选，调整竖线和文本的间距 */
}

关键细节解释 #

1. 垂直排列：div默认是块级元素（display: block），每个会自动独占一行，所以只要没有设置inline/inline-block/float这类让元素并排的样式，自然就是垂直排列。如果之前的代码里有这类样式，记得去掉或者用上面的display: block覆盖。
2. 去掉末尾竖线：用CSS的:not(:last-child)伪类，只给除了最后一个的item添加竖线，完美避免末尾多余的竖线问题。
3. 纵向滚动：给容器设置固定高度（height）和overflow-y: auto，当item的总高度超过容器高度时，就会自动出现垂直滚动条，内容可以上下滚动查看。

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