js时间轴

div部分:

<div class="timelines">
    <ul class="timeline">
        <li class="litime">
            <div class="time"><img src="" alt=""></div>
            <div class="des1">
                <p class="one">文字1</p>
                <p class="two">文字2</p>
            </div>
        </li>
        <li class="litime">
            <div class="des2">
                <p class="one">文字1</p>
                <p class="two">文字2</p>
            </div>
            <div class="time2"><img src="" alt=""></div>
        </li>
        <li class="litime">
            <div class="time"><img src="" alt=""></div>
            <div class="des1">
                <p class="one">文字1</p>
                <p class="two">文字2</p>
            </div>
        </li>
        <li class="litime">
            <div class="des2">
                <p class="one">文字1</p>
                <p class="two">文字2</p>
            </div>
            <div class="time2"><img src="" alt=""></div>
        </li>
        <li class="litime">
            <div class="time"><img src="" alt=""></div>
            <div class="des1">
                <p class="one">文字1</p>
                <p class="two">文字2</p>
            </div>
        </li>
        <li class="litime">
            <div class="des2">
                <p class="one">文字1</p>
                <p class="two">文字2</p>
            </div>
            <div class="time2"><img src="" alt=""></div>
        </li>
    </ul>
</div>

========================================================

style部分:

 <style>
 .timelines{
     margin-left: .73rem;
     margin-right: .73rem;
 }
 .timeline {
     list-style-type: none;
     background: url("") repeat-y scroll 50% 0 transparent;
     background-size: contain;
     height: 10rem;
 }
 .timeline .litime:first-child{
     display: flex;
     position: relative;
     padding-top: .45rem;
 }
 .timeline .litime{
     display: flex;
     position: relative;
     height: 1.8rem;
 }
 ul.timeline li .time{
     width: 4.1rem;
     height: .88rem;
     right: calc(50% + .3rem);
 }
 ul.timeline li .time2{
     width: 4.1rem;
 }
 ul.timeline li .time img{
     width: 1rem;
     margin-left: calc(100% - 1rem);
 }
 ul.timeline li .time2 img{
     width: 1rem;
     margin-left: 1rem;
 }
 .timeline .litime .des1{
     width: 4.1rem;
     margin-left: 1rem;
 }
 .timeline .litime .des2{
     width: 4.1rem;
 }
 .timeline .litime .des1 .one{
     color: #486DEB;
     font-size: .34rem;
 }
 .timeline .litime .des2 .one{
     color: #486DEB;
     font-size: .34rem;
     text-align: right;
 }
 .timeline .litime .des1 .two{
     color: #757575;
     font-size: .32rem;
 }
 .timeline .litime .des2 .two{
     color: #757575;
     font-size: .32rem;
     text-align: right;
 }
 </style>

主要是利用ul和定位来做.