这是我参与11月更文挑战的第1天，活动详情查看：[2021最后一次更文挑战](https://juejin.cn/post/7023643374569816095/ "https://juejin.cn/post/7023643374569816095/") ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0cfbc59ed23841f48e47e1c44222efd4~tplv-k3u1fbpfcp-watermark.image?) 先上图，主要实现两列水平时间轴，查看了很多人实现的，水平只有一列，并且elementUI的时间轴只有竖着的，不支持横向，最后只能含泪自己实现了，没想到还可以，只是如果数据很多翻页还没实现，有实现过这种的掘友可以艾特我一下。 ### 一、实现组件timelineH.vue timelineH.vue中的H代表横，起名字烦恼，哈哈。 **实现思路：** 1. 竖线的实现，通过li设置左边框实现，这里主要是要吧每第二个li放到前一个li的中间去，所以要设置li整个宽度的一半用绝对定位left实现，距离顶部的距离也要计算好。 2. 每个时间点的方块通过绝对定位实现，需要注意的是上面列的节点和下面列的节点距离top是不一样的，所以我用了css的:nth-child(2n)实现每第二个li的top距离。 3. 最后就是日期节点文字，也是判断li的奇偶数设置不同的top值 4. 因为没有翻页功能，所以li的长度要做适配或者数据量多要把li的宽度减少，不然数据量多就很不好看，暂时没有优化，但是如果是适应笔记本电脑还是可以通过修改li的宽度和lihalf来实现。 ### 二、调用组件

js： import timelineH from "@/components/timelineH.vue"; components: { timelineH }, data() { return { timelineList: [ { dateTime: '2021-09', content: '欢迎挖矿，天天挖矿，得到矿石，哈哈哈,欢迎挖矿，天天挖矿，得到矿石，哈哈哈,欢迎挖矿，天天挖矿，得到矿石，哈哈哈,欢迎挖矿，天天挖矿，得到矿石，哈哈哈。' },{ dateTime: '2021-10', content: '冬天要注意保暖，太冷了呢,冬天要注意保暖，太冷了呢，冬天要注意保暖，太冷了呢，冬天要注意保暖，太冷了呢。' },{ dateTime: '2021-11', content: '更文挑战三十天正式开始啦，我想要投影仪，一直想买的。' },{ dateTime: '2021-12', content: '就要到月底啦，新的一年开始，新年快乐，新的一年开始，新年快乐，新的一年开始，新年快乐。' } ] } } css: .timelineHengContainer { width: 100%; height: 227px; background-image: url('../../static/img/timelineBg.png'); background-size: 100% 100%; background-repeat: no-repeat; } 好啦，这就实现了水平两列的时间轴了，可以把代码复制下来直接用（使用CV大法吧~）。当时弄了两天，参考了elementui的纵向时间轴的画法，没有做出来，又用纯div和css实现也没有成功，主要是两列的竖线不知道该怎么画，还有节点，最后想起用li直接加个边框实现。有问题欢迎指正，谢谢~