html
<figure>
<img src="img/tour8.png" alt="" />
<figcaption> sssssssss</figcaption>
<div>
<em class="sat">满意度77%</em>
<span class="price">¥<strong>2222</strong>起</span>
</div>
<div class="type">国内长线</div>
</figure>

css样式

tour figure{

border: 1px solid #ddd;
display: inline-block;
padding: 4px;
border-radius: 4px;
margin: 15px 12px;
text-align: left;
position: relative;
}

tour figure img{

vertical-align: middle;}

tour figcaption{

color: #777;
line-height: 1.5;
letter-spacing: 1px;
padding: 7px;
font-size: 14px;
}

tour .sat{

float: right;
font-size: 14px;
}

tour .price{

color: #f60;
font-size: 14px;
letter-spacing: 1px;
}

tour .type{

width: 90px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #59b200;
color: white;
position: absolute;
top: 4px;
left: 4px;}

QQ截图20171207214535.png