Html 当内容不同时，如何在css中设置等高

即使内容（图案名称）不同，我也希望显示相同高度的卡片。我从DB获取内容。 这是我的html代码

<div class="wrapper" *ngFor="let row of Pattern,I">
   <div class="profile-card">
      <div class="profile-card__unit-description">
         <fa-icon 
          size="3x" 
          [icon]="faBrain" 
          class="icon"></fa-icon>
      </div>
      <div class="profile-card__unit-name">{{row.Pattern_Name}}</div> //This pattern name I'm getting it from DB.
      <a class="fancy-button bg-gradient1" *ngIf="arr[row.Pattern_Id] == 1" onclick="return false">
        <span (click)="onselect(row)">
          <i size="2x" class="fa fa-ticket" ></i>Start
        </span>
      </a>
  </div>  
</div>

---

请帮我做那件事。提前感谢

到目前为止，我还没有收到您的回复，您希望这两个项目并排或上下移动，所以只要看看您的代码，我就认为您需要并排使用

因此，在您的情况下，只需使用

display:flex

和flex child将采用并排的相同高度，以使下面的最后一个子锚点使用

flex wrap:wrap

，它将向下移动，因为前两个项目将各占50%的宽度

我给了两个div的背景色只是为了演示的目的，所以你可以看到他们采取相同的高度。

.wrapper{
显示：内联块；
边际：0.50px；
填充顶部：100px；
填充底部：80px；
}
* {
框大小：边框框；
}
.包装器：聚焦{
大纲：0；
}
.个人资料卡{
背景：白色；
宽度：300px；
显示：内联块；
保证金：自动；
边界半径：19px；
位置：相对位置；
文本对齐：居中；
盒影：-1px15px 30px-12px黑色；
身高：继承；
显示器：flex；
柔性包装：包装；
}
.profile-card\uuuu-unit-name{
字体大小：22px；
宽度：50%；
颜色：黑色；
边际上限：0px；
填充顶部：20px；
背景：绿色；
}
.配置文件-卡片\单元-说明{
填充：20px；
宽度：50%；
颜色：#F9C118；
背景：红色；
}
.花式纽扣{
宽度：100%；
显示：块；
}

仅演示的虚拟数据仅演示的摘要数据仅演示的摘要数据仅演示的摘要数据仅演示的摘要数据仅演示的摘要

行模式名称
开始

您是否尝试过为卡设置恒定高度<代码>高度：500px或<代码>高度：50%。此外，还要向卡中添加溢出，以防止元素从卡中溢出<代码>溢出：自动。要采用相同高度的元素。。。单元名称和单元描述？？您试过flex box吗？Flexbox将使子元素具有相同的高度。是的，我在@hrishikeshpaul中这样做了。但是，高度不同是的，我需要为单元名称和decsription@AtulThanks，@Atul，是的，我希望它是并排的，每行3张牌。它正在工作，但是我移除的卡的边界已经消失了。。你可以再添加一次，还有一件事，我已经编写了一段代码，一旦单击开始按钮，就可以禁用它。它返回false，并且开始按钮不会出现在卡上。即使这样，我也希望保持相同的卡片高度。那能做到吗？据我所知。。如果看不到它，你就让它显示为无，对吗？如果是，那么不要仅仅因为display none将从dom中删除它的高度和宽度，或者可以说它是框大小调整，所以在display none的位置只使用visibility:hidden；它将保持它的位置、高度和宽度。。。还有一件事。。。如果这个答案对你有帮助。。。别忘了把它标记为正确答案。是的，当然。我已经更新了代码。我使用了一些条件来禁用按钮。你能告诉我在这种情况下如何保持它的高度吗？

.wrapper {
    display: inline-block;
    margin: 0 50px;
    padding-top: 100px;
    padding-bottom: 80px;
}

.wrapper:focus {
   outline: 0;
}

.profile-card {
    background: white;
    width: 300px;
    display: inline-block;
    margin: auto;
    border-radius: 19px;
    position: relative;
    text-align: center;
    box-shadow: -1px 15px 30px -12px black;
    height:inherit;
}

.profile-card__unit-name {
    font-size: 22px;
    color: black;
    margin-bottom: 10px;
    margin-top:0px;
    margin-left:10px;
    margin-right:15px;
    height:inherit;
}

.profile-card__unit-description {
    padding: 20px;
    color:#F9C118;
}