1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
| <div class="product"> <div class="left"> <img /> </div> <div class="right"> <div class="title">商品名称</div> <div class="tip">商品简介</div> <div class="free">费用</div> </div> </div>
.product { display: flex; margin-bottom: 50px; padding: 10px 0; border-bottom: 0.5px solid #ffebebeb; .left { width: 150px; height: 80px; flex: 0 100px; img { width: 100%; height: 100%; border-radius: 10px; } } .right { flex: 1; height: 80px; margin-left: 10px; .title { font-size: 14px; height: 34px; line-height: 17px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .tip { font-size: 12px; line-height: 15px; height: 30px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #686868; } .free { font-size: 12px; height: 16px; color: #0b9aff; text-align: right; } } }
|