我無法以角度對齊材料設計卡

Question

我使用了 ng-flex，所以它們反應靈敏。 但我想對齊它們，使它們的高度相同。 你怎么能看到他們沒有變態。

 .content { padding: 16px; } .content > mat-card { width: 200px; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="content"> <div fxLayout="row wrap" fxLayoutGap="16px grid"> <div fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let manga of mangaList"> <mat-card class="mat-elevation-z4" > <mat-card-header> <mat-card-title>{{ manga.title }}</mat-card-title> </mat-card-header> <img mat-card-image src="{{ manga.preview }}"> <mat-card-actions> <button mat-button>Leggi</button> <button mat-button (click)="updateBookmark(manga)"> <i *ngIf="manga.bookmarked == 'false'; else ifBookmarked" class="fa fa-bookmark-o fa-lg"></i> <ng-template #ifBookmarked> <i class="fa fa-bookmark fa-lg"></i> </ng-template> </button> </mat-card-actions> </mat-card> </div> </div> </div>

Answer 1

給卡片類本身一個 maxheight + height 的限制。 所以所有的卡片高度相同。 如果您希望卡片的內容具有相同的高度，您必須硬編碼 mat-card-header、圖像和 mat-card-actions 的高度。 要調節圖像高度容器，請在它周圍放置一個 div。 類似的東西：

 <div fxLayout="row grid"> <mat-card *ngFor="let manga of mangaList"> <mat-card-header> -- Content -- </mat-card-header> <div> <img> </div> <mat-card-actions> -- Content -- </mat-card-actions> </mat-card> </div>

 Card { height: 200px; max-height 200px; mat-card-header { height 20px; max-height 20px; } image-div { height 60px; max-height 60px; } mat-card-actions { height 20px; max-height 20px; } }

另外我在第三個看到的標題是長。 如果你想保持標題長度，你必須調整高度