无法在卡片中的正确位置显示某些元素和文本

Question

我开发了一个小角度材料应用程序。我的目标是为卡提供以下设计，使其适合各种媒体（台式机，手机，平板电脑）

我的“ app.component.html”如下

<mat-toolbar color="primary">
  <div style="width:100%;" class="md-toolbar-tools" >
    Liste des annonces
    <span flex></span>
  </div>
</mat-toolbar>
<div fxLayout="row">
  <div fxFlex="20%"></div>
  <div fxFlex="60%">
    <mat-card *ngFor="let annonce of annonces; let i = index" style="border:red">
        <mat-card-content style="border:blue">
            <img src="./../assets/image/image{{i+1}}.jpg" alt="Avatar" style="position:absolute;top:0px;left:0px;width:40%;height:100%">
            <div class="container" style="left: 45%; top:10px;">
              <div style="left:70%;">{{annonce.dateConstruction | date:'dd MMMM yyyy'}}</div>
              <div>
                <span>{{annonce.type}}</span>
                <span style="float:right">{{annonce.prix}}</span>
              </div>
              <h4>{{annonce.surface}}</h4>
              <h4>{{annonce.adresse}}</h4>
              <div style="left:45%;">
                <p>{{annonce.description}}</p>
              </div>
            </div>
        </mat-card-content>
    </mat-card>
  </div>
  <div fxFlex="20%"></div>
</div>

<router-outlet></router-outlet>

我在html页面中放置元素和文本非常糟糕，因此在材料卡中也是如此。我在浏览器中获得以下输出

此外，当我缩小浏览器时，我看不到正确放置图像高度的元素和文本。我试图在stackblitz（https://stackblitz.com/edit/angular-pexq15?file=package.json）上重现相同的内容，但是我遇到了不考虑角度材料标签的问题。

所以您能帮我一下，告诉我出什么问题了，并注释正确的代码，以便于我改善html / css的水平。非常感谢

Answer 1

为此，您应尝试利用@angular/flex-layout库。另外，您应该考虑将样式移到CSS文件中，因为这将使HTML文件更整洁，样式更可重复使用。在您的堆叠闪电战中，您错过了在SCSS文件中包含@angular/material的样式，并且没有导入@angular/flex-layout模块的原因，这就是样式被弄乱的原因。

我尝试将您的示例固定在Stackblitz.上，以获取所需的文本间距，只需在这些元素的左侧添加填充或边距即可。另外，请注意图像：您必须添加合适的height属性，否则它将被裁剪/拉伸。