效果圖

image.png
字體大小顏色可以自己選擇修改
1.html
<div class="goods">
<img src="img/luyou.jpg" class="goodsImage"/>
<div class="goodsContent">
<span class="goodsTitle">TP-LINK TL-WDN5200H免驅(qū)版 650M 雙頻USB無線網(wǎng)卡臺(tái)式機(jī)筆記本通用 隨身WiFi接收器 發(fā)射器</span>
<span class="goodsPrice">¥198</span>
<span class="goodsSale">已售 189 件</span>
</div>
</div>
2.css
.goods{
height: 90px;
padding: 5px;
display: flex;
border-bottom: 1px solid #e4e4e4;
}
.goodsImage{
width: 90px;
height: 90px;
border-radius: 3px;
}
.goodsContent{
display: inline-block;
height: 90px;
position: relative;
padding-left: 5px;
}
.goodsTitle{
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.goodsPrice{
color: red;
position: absolute;
bottom: 2px;
font-size: 20px;
}
.goodsSale{
color: #c4c4c4;
position: absolute;
bottom: 2px;
right: 8px;
font-size: 13px;
}