垫卡长度不一样

Question

所以我有一个显示几种疾病的应用程序。 如您所见，卡片的高度不同，我似乎无法修复它。

这是我的 Html

 <div fxLayout="column" fxLayoutGap="2%" fxFlexAlign="stretch"> <mat-card> <mat-form-field> <input matInput (keyup)="filterDisease$.next($event.target.value)" placeholder="filter" type="text" data-cy="filterInput" [value]="filterDiseaseName" /> </mat-form-field> </mat-card> <mat-card class="error" *ngIf="errorMessage" data-cy="appError"> got an error while loading the disease list: {{ errorMessage }} </mat-card> <div *ngIf="diseases$ | async as diseases; else loadingOrError"> <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="0.5%" fxFlexAlign="stretch"> <div class="diseases" *ngFor="let disease of diseases" fxFlex="0 0 calc(25%-0.5%)" fxFlex.xs="100%"> <app-disease [disease]="disease" data-cy="diseaseCard"></app-disease> </div> </div> </div> <ng-template #loadingOrError> <span *ngIf="errorMessage; else loading"></span> <ng-template #loading> <mat-spinner></mat-spinner> </ng-template> </ng-template> </div>

这是我的 css

 .diseases { height: 100%; }

Answer 1

您将疾病的高度设置为 100%，如果您想设置固定高度，则无法修复使用 vh 或 px 而不是 % 可能会这样做

.diseases {
  height: 50vh;
}

Answer 2

这里最好的解决方案是 flexbox CSS。 仅供参考，这是一个 CSS 问题，可能应该被标记为一个。

div{
  display: flex;
  flex-wrap: wrap;
}

.diseases {
  display: flex; 
  padding: 0.5em;
  width: 100%;
}

这将为您提供所有具有相同高度的列的布局。

Answer 3

可能会向 css 文件添加参考

<head>
 <link rel="stylesheet" href="styles.css">
</head>

看看能不能解决。

并且还可能以 px、cm 或 picas(pc) 等单位设置大小。

垫卡长度不一样

问题描述

3 个解决方案

解决方案1
0 2020-05-22 09:02:59

解决方案2
0 2020-05-22 09:50:06

解决方案3
-2 2020-05-22 08:57:57

垫卡长度不一样

问题描述

3 个解决方案

解决方案1 0 2020-05-22 09:02:59

解决方案2 0 2020-05-22 09:50:06

解决方案3 -2 2020-05-22 08:57:57

解决方案1
0 2020-05-22 09:02:59

解决方案2
0 2020-05-22 09:50:06

解决方案3
-2 2020-05-22 08:57:57