javascript - 如何将图标与 CSS 中自定义卡片组件中的边框对齐？

Question

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

我正在使用 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 类相同的高度。我也试过 bootstrap 的卡片，但我没有得到首选的宽度。

如何让 car-icon-right 类与 container 高度相同？

Answer 1

Bootstrap 的默认卡片类有 flex-direction: column 您必须将其更改为
flex 方向:行

.card {     
  width: 20%;
  flex-direction: row !important;
}

.container {
  padding: 2px 16px;
}

.card-icon-right
{
    background-color: #ccc;
    border-left: 2px solid grey;
    width: 10%;
    margin: auto 0;
    padding: 30px;
}

<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>
  <div class="card-icon-right"> X </div>
</div>