我来帮你搞定这个竖线调整和添加的问题！结合你的需求，我们可以通过CSS伪元素来精准控制竖线的位置，同时优化底部列的布局，让效果和图2一致。

问题回顾 #

你已经在顶部三列白盒添加了灰色竖线，但位置不符合预期；底部五列白盒需要添加同样的竖线，之前的方法没达到效果，当前涉及的代码片段：

p.text3 { 
  position:fixed; 
  bottom:23rem; 
  text-align:center; 
  width:160px; 
  font-size:16px; 
  font-family: 'Raleway', sans-serif; 
  right:42rem; 
}

解决方案 #

1. 调整顶部三列的竖线位置 #

之前的竖线位置不对，大概率是因为用了固定定位或者直接给元素加边框导致的。我们改用CSS伪元素来生成竖线，这样能灵活控制位置：

假设你的顶部三列容器类是.top-columns，每个列的类是.top-column（你可以根据实际HTML结构调整类名），添加以下CSS：

/* 确保顶部列容器为相对定位，让伪元素能基于它定位 */
.top-columns {
  position: relative;
}

.top-column {
  position: relative;
  padding: 0 20px; /* 给列添加左右内边距，避免内容贴到竖线 */
}

/* 给顶部除最后一列外的所有列添加右侧竖线 */
.top-column:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 10%; /* 调整这个值控制竖线顶部的留白 */
  bottom: 10%; /* 调整这个值控制竖线底部的留白 */
  right: 0;
  width: 1px;
  background-color: #ccc; /* 灰色竖线的颜色 */
}

替换你之前添加竖线的代码，这样竖线就会出现在列的右侧，且上下留有空白，和图2的位置匹配。

2. 给底部五列添加竖线 #

底部的问题主要是position: fixed的布局方式导致竖线无法正确定位，我们先优化布局，再添加竖线：

第一步：优化底部列的布局

把原来的p.text3样式替换成Flex布局，让五列均匀分布：

/* 创建底部容器，用Flex布局排列五列 */
.bottom-columns-container {
  position: fixed;
  bottom: 23rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 20px; /* 列与列之间的间距，可按需调整 */
}

.bottom-columns-container p.text3 {
  text-align: center;
  width: 160px;
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
  position: relative; /* 让伪元素能基于当前列定位 */
  margin: 0; /* 清除默认的p标签外边距 */
}

然后在HTML里把五个p.text3放到这个容器里：

<div class="bottom-columns-container">
  <p class="text3">内容1</p>
  <p class="text3">内容2</p>
  <p class="text3">内容3</p>
  <p class="text3">内容4</p>
  <p class="text3">内容5</p>
</div>

第二步：添加底部竖线

用和顶部一样的伪元素方法，给底部除最后一列外的列添加竖线：

/* 给底部除最后一列外的所有列添加右侧竖线 */
.bottom-columns-container .text3:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: 0;
  width: 1px;
  background-color: #ccc;
}

关键注意事项 #

• 所有需要添加竖线的列元素必须设置position: relative，这样伪元素的绝对定位才会相对于列本身，而不是整个页面。
• 使用:not(:last-child)可以避免给最后一列添加竖线，符合图2的效果。
• 调整top和bottom的百分比值，可以精准控制竖线的上下留白，完全匹配图2的位置。

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