效果圖。

今天講中間那條線，線的長度要實現跟隨整個流程自適應。

一開始我的思路是img高度填充父div，但我的body，html，div都是height:auto;不是固定長度，導致無法實現。

公司一個姐姐給我一個思路，設定li的border-right，我試了，但不知道怎麼挪到中間，要弄懂又得花很久。

不想用js，也不想用jquery，犯不著。

經過長時間的嘗試和查詢，最後使用的方法是偽類，以下是程式碼，我的佈局是縱向佈局再float:left，最左邊時間介面class="a_tm_info"：

.a_tm_info{ 
  position: relative; 
} 

.a_tm_info::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 254px; 
  height: 100%; 
  width: 4px; 
  background: #ddd; 
  z-index: -1;
} //在a_tm_info旁邊畫一條豎線

如果有更簡單的方法請分享！

---------

2017/10/19

走了很多彎路

最簡單的辦法

<div style="height:auto;">

<div class="line" style="position: absolute;content: ''; top: 0; left: 23px; height:100%;  width: 4px;background: #ddd;z-index:-2; "></div>

</div>