如何在元素桌面和移动版本之间建立连接线？

问题描述

需要帮助制定策略以将其作为桌面版本实施：

然后最大的问题是将桌面切换到移动版本并工作，看起来像这样：

欢迎任何意见文章想法:)

解决方法

这种设计可以通过一些嵌套的 flexbox 杂技来实现。

下面是一个快速、粗略和肮脏的例子，只是为了演示机制。请随时根据您的需要调整代码。

注意：

• 实际数字后面的一行是一行 (div class=unit__timeline) 只是为了演示。为了使它更好，您需要在实时服务器上使用两个“div 行”。您可以使用相同的技术将它们对齐……您只需要通过相同的机制（绝对定位和通过顶部/右侧/底部/左侧的计算值确定尺寸）将它们计算为所需的尺寸/高度/宽度。

• 与断点相同：只有两个（移动版和小型桌面版）。请根据您的需要计算字体大小、所需网格等的大小。

html {
  font-family: sans-serif;
}

.unit__wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
}

.unit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.unit__number {
  padding-bottom: 20px;
}
.unit__number span {
  display: block;
  width: 50px;
  height: 50px;
  font-size: 20px;
  background: steelblue;
  border: 15px solid white;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.unit__content {
  flex-grow: 1;
  padding: 0 15px;
  text-align: center;
}

.unit__timeline {
  position: absolute;
  top: 32.5px;
  left: calc( 100% / 6 );
  right: calc( 100% / 6 );
  height: 10px;
  background: green;
  z-index: -1;
}

@media (min-width: 768px) {
  .unit__wrapper {
    flex-direction: column;
  }

  .unit {
    flex-direction: row;
  }

  .unit__number {
    padding: 20px 0;
  }

  .unit__content {
    text-align: left;
    padding: 0;
  }

  .unit__timeline {
    left: 32.5px;
    top: 60px;
    bottom: 60px;
    right: auto;
    height: auto;
    width: 10px;
  }
}

<div class="unit__wrapper">

    <div class="unit__timeline"></div>

    <div class="unit">
        <div class="unit__number"><span>1</span></div>
        <div class="unit__content">
            Li Europan lingues es membres del sam familie.
            Lor separat existentie es un myth. Por scientie,musica,sport etc,litot Europa usa li sam vocabular.
        </div>
    </div>
    <div class="unit">
        <div class="unit__number"><span>2</span></div>
        <div class="unit__content">
            Li Europan lingues es membres del sam familie.
            Lor separat existentie es un myth. Por scientie,litot Europa usa li sam vocabular.
        </div>
    </div>
    <div class="unit">
        <div class="unit__number"><span>3</span></div>
        <div class="unit__content">
            Li Europan lingues es membres del sam familie.
            Lor separat existentie es un myth. Por scientie,litot Europa usa li sam vocabular.
        </div>
    </div>

</div>