html - 卡片图像对齐
问题描述
我想将卡片中的图像固定在卡片主体的顶部。我已经尝试过 bottom: 0 但它不起作用。我希望卡体具有固定高度并固定在底部(正在工作)。但我希望图像固定在顶部,因为它们具有不同的大小并且会以不同的方式缩放。请有人帮忙。
<div class="card" style="width: 18rem;">
<img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Suit</h5>
<p class="card-text">Professional, business executive look.</p>
<p class="text-center">€299</p>
<a href="#" class="btn btn-success btn-block">Add to cart</a>
.card-img-top {
width: 100%;
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
height: 650px;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
bottom: 0;
position: absolute;
}
<div class="card" style="width: 18rem;">
<img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Suit</h5>
<p class="card-text">Professional, business executive look.</p>
<p class="text-center">€299</p>
<a href="#" class="btn btn-success btn-block">Add to cart</a>
</div>
</div>
解决方案
用于position:absolute
卡体
.card-body{
position:absolute;
bottom:0;
}
.card-img-top {
width: 100%;
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
height: 650px;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-body{
position:absolute;
bottom:0;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
<img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Suit</h5>
<p class="card-text">Professional, business executive look.</p>
<p class="text-center">€299</p>
<a href="#" class="btn btn-success btn-block">Add to cart</a>
</div>
</div>
推荐阅读
- bash - 在 win7 上安装 winbash:“ls”有效,但“clean”cmd 无效?
- sql - 如何在 SQL Server 中获取具有不同 P1 等级的多个团队的人员
- neo4j - 使用 Cypher 或 OpenCypher 返回一个新图
- node.js - Bitbucket 管道部署到 gCloud AppEngine 导致 [13] 发生内部错误
- ios - 如何在图标和外框下创建带有标题的按钮
- regex - VBA - 遍历 - 正则表达式 - Foreach 键
- python - 使用列表理解大写字母
- c# - C# - 使用 WebClient 进行多线程
- c# - C# 类库 - 资源文件未加载
- javascript - 如何制作超过 5 个输入的松弛对话框?节点松弛 API