Html 显示问题的图像

我总共有20张产品图片。我想展示这些图片，比如第一个产品应该在左侧，而该产品的相关图片应该在右侧。剩余产品应位于左侧第1列产品下方

目前，我正试图这样做，但它现在是正确的。但是我不擅长CSS。有人能告诉我我做错了什么吗

下面是我的代码

HTML

对于所有产品图像

  <mat-card class="example-card" fxFlex="60%;" fxFlex.xs="80%">
    <div class="grid" *ngIf="resultData">
      <div class="item photo" *ngIf="anums[0]">
        <img class="photothumb" [src]="resultData[0]" (click)="openImageDialogbox(resultData[0])" onError="this.src='/assets/kein-bild.gif';">
        <div class="desc">
          <p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_01]">Zum Produkt {{ anums[0] }}</p>
        </div>
      </div>
      <div class="item photo" *ngIf="anums[1]">
        <img class="photothumb" [src]="resultData[1]" (click)="openImageDialogbox(resultData[1])" onError="this.src='/assets/kein-bild.gif';">
        <div class="desc">
          <p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_02]">Zum Produkt {{ anums[1] }}</p>
        </div>
      </div>
      <div class="item photo" *ngIf="anums[2]">
        <img class="photothumb" [src]="resultData[2]" (click)="openImageDialogbox(resultData[2])" onError="this.src='/assets/kein-bild.gif';">
        <div class="desc">
          <p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_03]">Zum Produkt {{ anums[2] }}</p>
        </div>
      </div>
  </div>
</mat-card>

我所做的解决方案：

  <mat-card class="example-card" fxFlex="60%;" fxFlex.xs="80%">
    <div class='some-page-wrapper'>
      <div class='row'>
        <div class='column'>
          <div class='blue-column' *ngIf="anums[0]">
            <img [src]="resultData[0]" (click)="openImageDialogbox(resultData[0])" onError="this.src='/assets/noImage.png';">
            <div class="desc">
              <p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_01]">Zum Produkt {{ anums[0] }}</p>
            </div>
          </div>
        </div>
        <div class='green-column' *ngIf="secondImage">
          <img [src]="secondImage" (click)="openImageDialogbox(secondImage)" onError="this.src='/assets/noImage.png';">
          <div class="desc">
            <p>Bild 2</p>
          </div>
        </div>
      </div>
</div>
</mat-card>

---

你能为你的代码添加一个工作示例吗？@jahler..我解决了这个问题..你能为其他人发布你的解决方案吗？@jahler嘿，我添加了我的解决方案..很抱歉回复太晚..你能为你的代码添加一个工作示例吗？@jahler..我解决了这个问题..你能为其他人发布你的解决方案吗？@jahler嘿，我添加了我的解决方案..很抱歉回复太晚。。

.grid {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 150px;
  /* flex-direction: row wrap; */
}

.item {
  background-color: #ffffff;
  margin: 10px;
  width: 300px;
}

.photothumb {
  max-width: 200px;
  max-height: 200px;
  cursor: pointer;
}

.desc {
  padding: 10px 10px 5px 10px;
  cursor: pointer;
}

.desc img {
  width: 50%;
  margin: 0 10px 10px 0;
  float: left;
}

.desc p {
  margin-bottom: 10px;
  font-family: 'Arial';
  font-size: 15px;
}

.photo {
  grid-row-end: span 2;
}

  <mat-card class="example-card" fxFlex="60%;" fxFlex.xs="80%">
    <div class='some-page-wrapper'>
      <div class='row'>
        <div class='column'>
          <div class='blue-column' *ngIf="anums[0]">
            <img [src]="resultData[0]" (click)="openImageDialogbox(resultData[0])" onError="this.src='/assets/noImage.png';">
            <div class="desc">
              <p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_01]">Zum Produkt {{ anums[0] }}</p>
            </div>
          </div>
        </div>
        <div class='green-column' *ngIf="secondImage">
          <img [src]="secondImage" (click)="openImageDialogbox(secondImage)" onError="this.src='/assets/noImage.png';">
          <div class="desc">
            <p>Bild 2</p>
          </div>
        </div>
      </div>
</div>
</mat-card>

.some-page-wrapper {
  margin: 15px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}