Question

我使用了 ng-flex，因此它们具有响应性。但我想对齐它们，使它们的高度相同。 how you can see they aren't alinged。

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

我还看到第三个是标题很长。如果你想保持标题长度，你必须调整高度

我无法以角度对齐材料设计卡

1 个答案: