墊卡長度不一樣
[英]Mat cards not the same length
問題描述
所以我有一個顯示幾種疾病的應用程序。 如您所見，卡片的高度不同，我似乎無法修復它。
這是我的 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%; }
3 個解決方案
解決方案1
0 2020-05-22 09:02:59
您將疾病的高度設置為 100%，如果您想設置固定高度，則無法修復使用 vh 或 px 而不是 % 可能會這樣做
.diseases {
height: 50vh;
}
解決方案2
0 2020-05-22 09:50:06
這里最好的解決方案是 flexbox CSS。 僅供參考，這是一個 CSS 問題，可能應該被標記為一個。
div{
display: flex;
flex-wrap: wrap;
}
.diseases {
display: flex;
padding: 0.5em;
width: 100%;
}
這將為您提供所有具有相同高度的列的布局。
解決方案3
-2 2020-05-22 08:57:57
可能會向 css 文件添加參考
<head>
<link rel="stylesheet" href="styles.css">
</head>
看看能不能解決。
並且還可能以 px、cm 或 picas(pc) 等單位設置大小。
CrystalLive™ Color 下的卡片與其他卡片的尺寸不同
[英]Cards under CrystalLive™ Color are not the same size as the rest
我想創建一個 mat-checkbox 更改事件，它可以顯示或隱藏卡片
[英]I want to create a mat-checkbox change event, which can show or hide the cards
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.