不管图片是多大,查看详情的按钮永远在图片最后边的最下面,也就是右下角,这个按钮的最右边不能超过图片的最右边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.pic {
border: 0px solid black;
position: relative;
box-sizing: border-box;
display: flex;
-moz-box-orient: vertical;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.pic .imgs {
border: 0px solid black;
position: relative;
box-sizing: border-box;
display: flex;
-moz-box-orient: vertical;
flex-direction: column;
align-content: flex-start;
flex-shrink: 0;
vertical-align: middle;
background-color: rgb(250, 250, 250);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.price_info {
border: 0px solid black;
position: absolute;
box-sizing: border-box;
display: flex;
-moz-box-orient: horizontal;
flex-direction: row;
align-content: center;
flex-shrink: 0;
bottom: 40.48px;
right: 40.48px;
z-index: 2;
height: 94.4533px;
-moz-box-align: center;
align-items: center;
border-radius: 168.667px;
background-image: linear-gradient(to right, rgb(255, 102, 100), rgb(239, 51, 65));
padding: 20.24px 50.6px 20.24px 43.8533px;
}
.price_info .price {
border: 0px solid black;
position: relative;
box-sizing: border-box;
display: block;
-moz-box-orient: vertical;
flex-direction: column;
align-content: flex-start;
flex-shrink: 0;
font-size: 47.2267px;
color: rgb(255, 255, 255);
}
.price_info .line {
border: 0px solid black;
position: relative;
box-sizing: border-box;
display: block;
-moz-box-orient: vertical;
flex-direction: column;
align-content: flex-start;
flex-shrink: 0;
font-size: 40.48px;
color: rgb(255, 255, 255);
opacity: 0.6;
padding-left: 40.48px;
padding-right: 40.48px;
}
.price_info .detail {
border: 0px solid black;
position: relative;
box-sizing: border-box;
display: block;
-moz-box-orient: vertical;
flex-direction: column;
align-content: flex-start;
flex-shrink: 0;
font-size: 40.48px;
color: rgb(255, 255, 255);
}
</style>
<body>
<div class="pic" >
<div class="imgs">
<img src="https://img.alicdn.com/bao/uploaded/i3/3161393975/TB1vZM1hY_I8KJjy1XaXXbsxpXa_!!0-item_pic.jpg_430x430q90.jpg" width="830" height="430">
</div>
<div class="price_info">
<!-- empty --><span
class="price">¥299.00</span>
<!-- empty --><span
class="line">|</span><span
class="detail">查看详情</span>
<!-- empty --></div>
</div>
</body>
</html>