求帮忙改下css效果

qq_38741240 2017-12-15 11:06:25
不管图片是多大,查看详情的按钮永远在图片最后边的最下面,也就是右下角,这个按钮的最右边不能超过图片的最右边





<!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>




...全文
461 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
cnaaa8 2018-01-04
  • 打赏
  • 举报
回复
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .dscsa{ width:930px; height:500px; margin:auto; } .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="dscsa"> <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></div> </body> </html>
霜月枫桥 2017-12-19
  • 打赏
  • 举报
回复
改一下HTML代码的位置就行了,其他的不用动
<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 class="price_info">
    <!-- empty --><span
        class="price">¥299.00</span>
    <!-- empty --><span
        class="line">|</span><span
        class="detail">查看详情</span>
    <!-- empty --></div>
    </div>
    
</div>
</body>
pengxiaoshuang0 2017-12-17
  • 打赏
  • 举报
回复
你没有指定网站具体放在什么位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .dscsa{ width:930px; height:500px; margin:auto; } .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="dscsa"> <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></div> </body> </html>

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧