效果图
微信图片_20190219160039.png
css
.trans{
width: 100%;
}
.trans ul{
list-style: none;
padding: 0;
margin: 0;
}
.trans ul li{
display: inline-block;
float: left;
position: relative;
}
.left{
width: 35%;
text-align: center;
}
.right{
width: 65%;
box-sizing: border-box;
border-left: 1px solid #C4C4C4;
}
.time{
text-align: right;
}
.right img{
width: 25px;
height: 25px;
vertical-align: middle;
position: absolute;
left: -12.5px;
}
.status{
display: inline-block;
padding-left: 30px;
}
.transCon{
display: inline-block;
padding: 8px 0px 8px 30px;
}
html
<div class="trans">
<ul>
<li class="left">
<span class="date">2017.09.13</span>
<span class="time">13:04</span>
</li>
<li class="right">
<img src="img/gou.png">
<span class="status">已签收</span>
<span class="transCon">快件在【上海静安】被签收，签收人是本人</span>
</li>
<li class="left">
<span class="date">2017.09.13</span>
<span class="time">13:04</span>
</li>
<li class="right">
<img src="img/gou.png">
<span class="status">已签收</span>
<span class="transCon">快件在【上海静安】被签收，签收人是本人</span>
</li>
<li class="left">
<span class="date">2017.09.13</span>
<span class="time">13:04</span>
</li>
<li class="right">
<img src="img/gou.png">
<span class="status">已签收</span>
<span class="transCon">快件在【上海静安】被签收，签收人是本人</span>
</li>
</ul>
</div>
