在工作中遇到了这种布局的需求2次，但是都没有能够使用很准确的方式来实现，今天在36氪的网站上面看到了这个布局，于是就稍微留意了一下，get到了一种新的方式来实现，非常好用的思路，于是就记录下来。
首先我们来看一下这种方式的布局效果是什么，如下图
标题的前面由间隔的点与线串联起来，跟时间轴的节点类似。实现的难点在于线条需要适应内容的高度，于是首先想到的便是使用两列等高布局的方式。可是后来发现这种方式虽然能够实现类似的效果，但是在调整适配的时候却十分麻烦。还好有更加合适的方式来实现。
实现效果如下：
See the Pen pywxRx by Ormie (@yangbo5207) on CodePen.