一個時間軸的組成

使用一個塊級元素包裹內容，并未塊級元素設置邊框

定義圓形或者菱形等元素標簽，子元素設置偏移或者定位元素將圖標定位到邊框上

使其中的內容不溢出，自動換行，內容自動撐高
英文自動換行：word-wrap:break-word;word-break:break-all

時間軸樣式部分

使用時需要注意可能繼承的樣式會給li:after等偽類元素設置樣式而造成效果異常
css中定義了一個圓形的圖標class="yuan"，一個菱形的圖標class="diamond"

<style>body{font:12px"宋體","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}.ym-timeline{display:block}.ym-timeline ul{margin-left:30px;border-left:2px solid green;padding:0}.ym-timeline ul li{width:100%;margin-left:-12px;line-height:20px;font-weight:narmal;list-style:none}/*圓形圖標*/.ym-timeline ul li span.yuan{width:8px;height:8px;background:#fff;border:2px solid green;margin:5px;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;overflow:hidden;display:inline-block;float:left}/*菱形圖標*/.ym-timeline ul li span.diamond{width:8px;height:8px;background:#fff;border:2px solid green;margin:5px;overflow:hidden;display:inline-block;float:left;transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg)}.ym-timeline ul li span.stime{padding-left:7px;font-size:12px;line-height:20px;color:green}.ym-timeline ul li .ym-tl-content{padding:10px 0 10px 20px;font-size:14px;line-height:25px;word-wrap:break-word;word-break:break-all}.ym-timeline ul li:first-child span.diamond,.ym-timeline ul li:first-child span.yuan{margin-top:0}.ym-timeline ul li:last-child span.diamond,.ym-timeline ul li:last-child span.yuan{margin-top:8px}.ym-timeline ul li .ym-tl-content img{max-width:100%;} </style>

時間軸html結構

<!--效果預覽http://runjs.cn/code/6udflsbt--><div class="ym-timeline"> <ul> <li> <span class="diamond"></span> <span class="stime">2017-07-17</span> <div class="ym-tl-content">是開始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是結束 </div> </li> <li> <span class="diamond"></span> <span class="stime">2017-07-18</span> <div class="ym-tl-content">是開始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是結束 </div> </li> <li> <span class="diamond"></span> <span class="stime">2017-07-19</span> <div class="ym-tl-content">是開始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是結束 </div> </li> <li> <span class="diamond"></span> <span class="stime">2017-07-20</span> <div class="ym-tl-content">是開始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是結束 </div> </li> <li> <span class="yuan"></span> <span class="stime"></span> </li> </ul> </div>

效果預覽

完整代碼

轉載于:https://www.cnblogs.com/morang/p/7194071.html

總結

以上是生活随笔為你收集整理的一个简单的时间轴demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。