如何在elements桌面版和移动版之间建立连接线？答案

【问题标题】：How to make conection line between elements desktop and mobile virsion?如何在elements桌面版和移动版之间建立连接线？
【发布时间】：2021-07-07 11:21:38
【问题描述】：

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

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

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

【问题讨论】：

标签： html css sass less css-transitions

【解决方案1】：

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

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

注意事项：

数字实际后面的行是 ONE 行 (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, 
            musica, sport etc, 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, 
            musica, sport etc, litot Europa usa li sam vocabular.
        </div>
    </div>

</div>

【讨论】：