原型：
图片.png
代码：
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>状态详情</title>
<style> #timeleft div { height: 65px; color: #333333; } #timecenter div { height: 65px; color: #333333; } #timeright div { height: 65px; color: #333333; } #timeright div p { margin: 0 0 0px; } .cicle1 { position: absolute; top: 0px; left: -10px; border-radius: 10px; list-style: none; width: 20px; height: 20px; border: 1px solid #cccccc; background: #ffffff; } .cicle2 { position: absolute; top: 70px; left: -10px; border-radius: 10px; list-style: none; width: 20px; height: 20px; border: 1px solid #cccccc; background: #ffffff; } .cicle3 { position: absolute; top: 140px; left: -10px; border-radius: 10px; list-style: none; width: 20px; height: 20px; border: 1px solid #cccccc; background: #ffffff; } .cicle4 { position: absolute; top: 210px; left: -10px; border-radius: 10px; list-style: none; width: 20px; height: 20px; border: 1px solid #cccccc; background: #ffffff; } </style>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
</head>
<body>
<!--右侧信息-->
<div class="col-md-10 col-sm-10 col-xs-10" style="margin-top:30px;">
<div class="col-md-4 col-sm-4 col-xs-4" id="timeleft">
<div>2012-12-24 8:00</div>
<div>2012-12-24 8:00</div>
<div>2012-12-24 8:00</div>
<div>2012-12-24 8:00</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" id="timecenter">
<div style="height:212px; border-left:1px solid #366595; position:absolute; left:65px;">
<ul>
<li class="cicle1"></li>
<li class="cicle2"></li>
<li class="cicle3"></li>
<li class="cicle4"></li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" id="timeright">
<div>
<p>完工交车</p>
<p>1小时</p>
</div>
<div>
<p>完工交车</p>
<p>1小时</p>
</div>
<div>
<p>完工交车</p>
<p>1小时</p>
</div>
<div>
<p>完工交车</p>
<p>1小时</p>
</div>
</div>
</div>
</body>
</html>
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】