先看效果圖：

Paste_Image.png

當(dāng)然這個(gè)效果是按橫排列的，我們先看簡單的html布局（圖標(biāo)是SVG圖）：

<div class="content-line">
        <i class="icon-Processnode"></i><div class="follow-up-route"></div>
        <i class="icon-Processnode"></i><div class="follow-up-route"></div>
        <i class="icon-done"></i>
</div>
<div class="content-text">
        <span class="content-title">提交申請</span>
        <span class="content-title">銀行處理中</span>
        <span class="content-title">已到賬</span>
</div>
<div class="content-text-time">
        <span class="content-time">2016-03-24 08:00</span>
        <span class="content-time">2016-03-25 09:00</span>
        <span class="content-time">2016-03-26 10:00</span>
</div>

基本上簡單的CSS樣式是采用flex做布局，通過flex=1去做拉伸比例適配

.content-line{
        .flex-layout(center);
        .flex-vertical();
        color: #5FC423;
        margin-bottom: 10px;
        margin-left: 55px;
        margin-right: 55px;
}
.content-text, .content-text-time{
        .flex-layout(center);
        .flex-vertical();
        color: #5FC423;
        text-align: center;
}
.content-text-time{
        margin-bottom: 20px;
}
 .content-title{
        color: #333;
        font-size: 13px;
        flex: 1;
}
.content-time{
        color: #B1B1B1;
        font-size: 10px;
        flex: 1;
}

.follow-up-route{
        height: 1px;
        background: #5FC423;
        flex: 1;
}

因?yàn)橛玫搅薴lex,所以把居中的flex抽了出來，工具css方法其實(shí)是這樣的：

// 伸縮盒

.flex-layout(@align:center) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -moz-box-align:@align;
  -webkit-box-align:@align;
  -webkit-box-align: @align;
  -moz-box-align: @align;
  -ms-flex-align:@align;
  -webkit-justify-content: @align;
  -moz-justify-content: @align;
  justify-content: @align;

}

.flex-vertical() {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack:center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}