我正在尝试为我的应用程序制作自定义卡组件。这是我在草图中所做的设计。

javascript - 如何将图标与CSS的自定义卡组件中剩余的边框对齐?-LMLPHP

我正在使用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>

09-25 17:20
查看更多