如何使元素、桌面和移动虚拟之间的交汇线？

Question

需要帮助才能制定战略，将其实现为桌面版本：

​

​

然后最大的问题是将桌面切换到移动版本，并运行如下：

​

​

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

Answer 1

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

下面是一个快速，粗糙和肮脏的例子，只是为了演示机修工。请随时调整代码以满足您的需要。

备注：

• 数字后面的行实际上是一行(div class=unit__timeline)，只是为了演示一下。为了让它更好，您需要在实时服务器上使用两条“div- live”。你可以用同样的技术对齐它们..。您只需通过相同的机械师将它们计算到所需的尺寸/高度/宽度( top/right/bottom/left).

的绝对定位和计算值大小)即可。

• 与断点相同:只有两个(移动和从小型台式机升级)。请根据您的需要计算字体大小、所需网格等大小。

​

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>

​