时间戳

首页 > 解决方案 > 内容不同时如何在css中设置相等的高度

html - 内容不同时如何在css中设置相等的高度

问题描述

即使内容（模式名称）不同，我也想以相同的高度显示卡片。我从数据库中获取内容。这是我的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>

这是我用于包装器和配置文件卡的 CSS 

.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;
}

请帮助我这样做。提前致谢

标签： htmlcssangular

解决方案

到目前为止，我还没有收到您的回复，即您希望将这 2 个项目并排或上下放置，因此仅看到您的代码，我假设您需要并排放置它。

因此，在您的情况下，只需 usedisplay: flex;和 flex-child 将采用相同的高度并排放置，以使 last-child 锚点低于 useflex-wrap: wrap并且它将下降，因为前 2 个项目将分别占用 50% 的宽度。

我给出了两个 div 的背景颜色只是为了演示目的，这样你就可以看到它们的高度相同。 

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

* {
  box-sizing: border-box;
}

.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;
    display:flex;
    flex-wrap: wrap;
}

.profile-card__unit-name {
    font-size: 22px;
    width: 50%;
    color: black;
    margin-top:0px;
    padding-top: 20px;
background: green;
}

.profile-card__unit-description {
    padding: 20px;
    width: 50%;
    color:#F9C118;
    background: red;
}

.fancy-button {
  width: 100%;
  display: block;
}
<div class="wrapper" *ngFor="let row of Pattern,I">
   <div class="profile-card">
      <div class="profile-card__unit-description">
      <p>dummy data for demo onlydummy data for demo onlydummy data for demo onlydummy data for demo onlydummy</p>
         <fa-icon 
          size="3x" 
          [icon]="faBrain" 
          class="icon"></fa-icon>
      </div>
      <div class="profile-card__unit-name">row Pattern_Name</div> 
      <a class="fancy-button bg-gradient1">
        <span (click)="onselect(row)">
          <i size="2x" class="fa fa-ticket" ></i>Start
        </span>
      </a>
  </div>  
</div>

如果需要其他东西，请随时分享

推荐阅读