对齐用于动态数据呈现的css时间线组件

Question

我正在尝试构建一个时间线组件，所以时间轴组件主要有4个组件。

1. 圆圈
2. 虚线
3. 左侧细节
4. 右侧细节

因此，我可以添加这些组件，但是如何对齐这些组件，以便可以根据提供的动态数据来使用。文字应该在每个圆圈的左边和右边。

码箱

样本设计

Answer 1

1. 我建议您创建您的"TimelineEvent“组件，以便它们包含有关每个事件的数据和信息(显然，将它们作为道具接收)。
2. 我会使用一个表来保持行垂直对齐：

​

#wrapper {
  display: inline-block;
}

table {
  border-collapse: collapse;
}

.timeline-event {
  height: 100px;
}

.timeline-event:first-of-type .timeline-dash {
  top: 50%;
  height: 50%;
}

.timeline-event:last-of-type .timeline-dash {
  height: 50%;
}

.middle-cell {
  position: relative;
}

.circle-wrapper {
  position: relative;
  width: 20px;
}

.circle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: tomato;
  border-radius: 100%;
  z-index: 2;
}

.timeline-dash {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  border-right: 1px solid black;
  z-index: 1;
}

<div id="wrapper">
  <table>
    <tr class="timeline-event">
      <td class="data">
        Event Data<br/>
        Second Row
      </td>
      <td class="middle-cell">
        <div class="circle-wrapper">
          <div class="circle"></div>
        </div>
        <div class="timeline-dash"></div>
      </td>
      <td class="info">
        Event Info
      </td>
    </tr>

    <tr class="timeline-event">
      <td class="data">
        Event Data<br/>
        Second Row<br/>
        Third Row
      </td>
      <td class="middle-cell">
        <div class="circle-wrapper">
          <div class="circle"></div>
        </div>
        <div class="timeline-dash"></div>
      </td>
      <td class="info">
        Event Info
      </td>
    </tr>

    <tr class="timeline-event">
      <td class="data">
        Event Data<br/> Second Row<br/> Third Row
      </td>
      <td class="middle-cell">
        <div class="circle-wrapper">
          <div class="circle"></div>
        </div>
        <div class="timeline-dash"></div>
      </td>
      <td class="info">
        Event Info
      </td>
    </tr>
  </table>
</div>

​