CSS实现带连接点时间轴 不大量使用position: absolute的更优方案

你当前依赖绝对定位硬编码坐标的实现方式维护成本很高，后续新增节点、调整时间刻度都需要整体重调所有坐标参数，推荐以下更优的实现思路：

方案1：用CSS Grid重构基础布局 #

• 将整个时间轴容器划分为固定的行列网格：行对应每一行的Thing条目，列对应底部的日期刻度，行列大小统一用CSS变量定义，天然实现节点和行、时间刻度的对齐
• 所有圆点、文本标签都可以放在对应网格单元格内，仅需设置单元格内的相对偏移，不需要全局写死top/left属性，调整布局时仅修改网格参数即可全局生效
  示例基础配置：

:root {
  --row-height: 50px;
  --col-width: 50px;
  --circle-size: 12px;
}
.container {
  display: grid;
  grid-template-rows: repeat(4, var(--row-height)) 40px; /* 4行Thing + 1行日期 */
  grid-template-columns: 70px repeat(8, var(--col-width)); /* 左侧标签列 + 8个刻度列 */
  width: 500px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

方案2：用SVG替代div实现连线 #

抛弃用多个div拼接横竖连线的方式，直接在容器内叠加一层SVG画布绘制连线：

• 仅需通过<line>标签即可绘制任意角度的连接线，原生支持虚线、渐变、端点样式等效果，不需要额外写背景重复的CSS
• 可以结合JS动态读取圆点的坐标，自动计算连线的起点终点参数，新增关联关系时不需要手写连线的CSS样式，维护成本极低
  示例基础SVG配置：

<svg class="connection-svg" style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;">
  <!-- 起点Thing1第1个点 到 终点Thing4的红色点的连接线 -->
  <line x1="76" y1="56" x2="326" y2="206" stroke="blue" stroke-opacity="0.5" stroke-width="3" stroke-dasharray="10 2" />
</svg>

方案3：轻量优化现有代码 #

如果不想大改现有结构，可先将所有硬编码的尺寸抽为CSS变量，降低维护成本：

• 将行高、刻度宽度、圆点大小等通用参数在:root下统一定义
• 所有top/left/宽高属性都用calc()结合变量计算，修改全局样式时仅需修改变量值即可

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