我正在尝试为我的应用程序制作自定义卡组件。这是我在草图中所做的设计。
我正在使用this source制作自定义卡。我也在使用Bootstrap Framework,但没有看到适合我设计的卡片组件。
这是我写的自定义代码:
.card {
width: 20%;
}
.container {
padding: 2px 16px;
}
.card-icon-right {
background-color: #ccc;
border-left: 2px solid grey;
width: 10%;
}
<div class="card">
<div class="container">
<h4><b>John </b></h4>
<p>Engineer</p>
<div class="card-icon-right float-right">X</div>
</div>
</div>
问题是我没有将我制作的自定义div(
card-icon-right
)设置为与container
类相同的高度。我也尝试过引导卡,但没有得到首选的宽度。如何获得与
car-icon-right
相同高度的container
类? 最佳答案
你的意思是这样吗?
.card {
width: 20%;
}
.container {
padding: 2px 16px;
}
.card-icon-right {
background-color: #ccc;
border-left: 2px solid grey;
width: 20%;
position: absolute;
right:0;
top: 0;
height: 100%;
}
.card-icon-right p {
text-align: center;
margin-top: 25px;
cursor: pointer;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card">
<div class="container">
<h4><b>John </b></h4>
<p>Engineer</p>
<div class="card-icon-right"><p>X</p></div>
</div>
</div>