3

我正在尝试将<mat-card>我拥有的分成两列，如下所示： 在此处输入图像描述

左侧的图像可能占卡的 25%，右侧的标题 + 2 个扩展面板在一列中。无论我尝试什么，总是有一个列，所以它看起来像这样：

img h1 expansion panel expansion panel

这在小屏幕上很好，但对于更大的屏幕，我希望它像上图一样。我还注意到，无论我是否向其添加样式并更改它，图像都不会调整大小。

这是HTML：

<div fxLayout="row wrap" fxLayoutAlign="center center">
  <mat-card *ngFor="let pet of pets">
    <mat-card-content>
      <div fxLayout="row">
        <div fxFlex="25%">
          <img src="{{ pet.imagePath }}" />
        </div>
        <div fxFlex="75%">
          <h1>{{ pet.name }}</h1>
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              Favorite Foods!
            </mat-expansion-panel-header>
          </mat-expansion-panel>
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              Bad ingredients!
            </mat-expansion-panel-header>
          </mat-expansion-panel>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>

我对上述的理解是

  • 垫卡使用行换行包装在 div 中，这意味着垫卡将连续出现并在最后换行到新行
  • 在 mat-card-content 内部，我有一个使用 row 用于 fxLayout 的 div，这意味着每个子元素应该并排。因为我将 img 拆分为一个 div，将 h1/扩展面板拆分为另一个，所以这两个 div 应该并排排列正确吗？
  • 因为我将第一个 div 设置为 25%，所以它应该占行宽的 25%，而第二个 div 应该占 75%。

我在这里有什么问题？

编辑：这是我从另一篇文章中看到的垫卡示例，与我想要实现的目标相似。不幸的是，该解决方案对我不起作用：如何将 mat-card-image 高度设置为 100%？

在此处输入图像描述

更新：我很愚蠢。我没有安装 flex-layout 模块。如果有人想知道为什么他们的 fxlayout 东西不起作用，请确保您已安装它并将其添加到您的导入中！

4

0 回答 0