css 样式:
.build-home_detail {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
margin-top:.3125rem
}
.build-home_detail .item {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
-webkit-box-align:baseline;
-ms-flex-align:baseline;
align-items:baseline;
margin-top:.625rem;
line-height:1.25rem
}
.build-home_detail .item .title {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-negative:0;
flex-shrink:0;
font-size:.875rem;
color:#888
}
.build-home_detail .item .content {
display:block;
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
font-size:.875rem;
color:#101010;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
margin:0 .375rem
}
.build-home_detail .item .area {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
margin-left:.375rem;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis
}
.build-home_detail .item .area .plate {
font-size:.875rem;
color:#101010;
-ms-flex-negative:0;
flex-shrink:0
}
.build-home_detail .item .area .position {
display:block;
font-size:.875rem;
color:#101010;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
margin-right:.375rem
}
.build-home_detail .item .btn-detail {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-ms-flex-negative:0;
flex-shrink:0;
font-size:.75rem;
color:#0A6;
background:#fff
}
html代码
<div class="build-home_detail">
<div class="item">
<span class="title">位置</span>
<div class="area">
<a href="#" title="北京丰台新房" class="plate">丰台</a>-
<a href="#" title="北京宋家庄新房" class="plate">宋家庄</a>-
<span class="position">北京丰台方庄东铁匠营街道</span>
</div>
<span class="btn-detail">发地址到手机</span>
</div>
</div>