点线list-style布局

在工作中遇到了这种布局的需求2次,但是都没有能够使用很准确的方式来实现,今天在36氪的网站上面看到了这个布局,于是就稍微留意了一下,get到了一种新的方式来实现,非常好用的思路,于是就记录下来。

首先我们来看一下这种方式的布局效果是什么,如下图

xxx

标题的前面由间隔的点与线串联起来,跟时间轴的节点类似。实现的难点在于线条需要适应内容的高度,于是首先想到的便是使用两列等高布局的方式。可是后来发现这种方式虽然能够实现类似的效果,但是在调整适配的时候却十分麻烦。还好有更加合适的方式来实现。

实现效果如下:

See the Pen pywxRx by Ormie (@yangbo5207) on CodePen.