前端 - 请问一下如何用css绘制一个时间轴 横向 数据上下排列？

Question

类似这种的 方框中放数据

Answer 1

最简单的方法就是在每个时间轴的位置上，加上 position: relative; 后，然后再把子元素做绝对定位。至于每个时间轴的长度位置，就额外去控制。

<div class="timeline">  <div class="item">    <div class="content">这里是时间轴中每个时间点的内容</div>  </div>  <div class="item">    <div class="content">这里是时间轴中每个时间点的内容</div>  </div>  <!-- item 就是每个时间轴的点，content 就是时间轴里的内容 --></div>

大概的 HTML 结构就是上面这样。

.item {    position: relative;}.content {    position: absolute;    left: 50%;    transform: translateX(-50%);}.item::after {    content: '';    position: absolute;    left: 0;    width: 1px;    height: 100px;    background-color: #000;}.item:nth-child(odd)::after {    bottom: 0;}.item:nth-child(even)::after {    top: 0;}.item:nth-child(odd) .content {    top: -100px;}.item:nth-child(even) .content {    bottom: -100px;}

CSS 没具体测试过，大概意思就是这样，通过 nth-child 的奇偶判断方式来改变子元素的定位方向，以及那条线的显示位置。

至于每个元素的间距，如果是固定间距的话，那就简单了，如果不是固定间距，方法也有很多，具体还是根据设计稿来走吧。这个不是重点了。