React垂直步骤器标题与圆圈对齐及布局重叠问题求助

问题核心 #

当前布局中，标题被放在圆圈容器内并设置position: absolute，导致标题脱离正常文档流、不占据布局空间，进而和副标题/描述重叠。要实现标题撑开布局且与圆圈对齐，需调整DOM结构和Flex布局逻辑。

解决方案 #

调整DOM结构，将标题移至详情容器中，同时利用Flex布局让圆圈与标题垂直对齐，具体修改如下：

修改后的React组件代码

const VerticalStepperItemUIComponent = ({ title, subtitle, description }) => (
  <div className="vertical-stepper-item-ui-component-container">
    {/* 左侧圆圈+竖线容器 */}
    <div className="vertical-stepper-item-ui-component-container__circle-container">
      <div className="vertical-stepper-item-ui-component-container__circle"></div>
      <div className="vertical-stepper-item-ui-component-container__border"></div>
    </div>
    {/* 右侧详情容器：包含标题、副标题、描述 */}
    <div className="vertical-stepper-item-ui-component-container__details-container">
      <div className="vertical-stepper-item-ui-component-container__title">
        {title}
      </div>
      <div>{subtitle}</div>
      <div>{description}</div>
    </div>
  </div>
);

ReactDOM
  .createRoot(root)
  .render(<VerticalStepperItemUIComponent 
    title="前端开发工程师"
    subtitle="某科技公司 | 2022-至今"
    description="负责React项目的组件开发与性能优化，参与多个核心业务模块的迭代"
    />
  );

修改后的CSS代码

/* 主容器：横向排列，控制圆圈与详情的间距 */
.vertical-stepper-item-ui-component-container {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

/* 左侧圆圈容器：垂直布局，固定宽度确保圆圈位置稳定 */
.vertical-stepper-item-ui-component-container__circle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18px;
}

.vertical-stepper-item-ui-component-container__circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid black;
  align-self: flex-start;
  margin-top: 2px; /* 微调与标题的垂直对齐 */
}

.vertical-stepper-item-ui-component-container__border {
  width: 1px;
  background-color: black;
  flex-grow: 1;
  margin-top: var(--spacing-xs);
}

/* 右侧详情容器：垂直布局，用gap控制内部元素间距 */
.vertical-stepper-item-ui-component-container__details-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-bottom: var(--spacing-md);
}

/* 标题移除绝对定位，正常占据布局空间 */
.vertical-stepper-item-ui-component-container__title {
  font-weight: bold;
}

关键修改点说明 #

1. DOM结构调整：将标题从圆圈容器移至详情容器，让标题作为正常流元素撑开布局，副标题和描述自动排列在标题下方，避免重叠。
2. Flex布局优化：主容器用gap控制圆圈与详情的间距，圆圈容器设置固定宽度确保位置稳定，通过align-self: flex-start让圆圈与标题第一行垂直对齐。
3. 移除绝对定位：删除标题的position: absolute，让标题回到正常文档流，自然占据空间。
4. 间距统一控制：用gap管理内部元素间距，布局更整洁易维护。

调整后既能保证标题与左侧圆圈的对齐效果，又能让标题正常撑开布局，完全匹配LinkedIn经验栏的布局逻辑。

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