将Mat-Card对齐页面的右侧

时间:2019-08-23 16:40:30

标签: angular-material

这看起来应该很简单,但是我所看到和尝试的方法根本无法正常工作。

我有一张卡片可以返回一个数组,我只希望它在页面的右上角,并在工具栏和右边缘之间留一点填充。我已经尝试过使用flexlayout进行操作,但没有任何改变。有人有任何简单的例子吗?

已删除所有尝试对齐的当前代码...

<mat-card class="dashboard-card">
  <mat-card-header [style.backgroundColor]="'orange'">
    <mat-card-title>Datafiles</mat-card-title>
  </mat-card-header>
    <mat-card-content [ngStyle]="{'height':'500px', 'overflow-y': 'auto', 'background-color': 'white'}" >
      <div *ngFor="let l of list | async">
          <p style="line-height:1">
            <span> <img src="{{l.layoutPreDefined == false ? '../../../assets/images/newlayout.jpg' : '../../../assets/images/predefinedlayout.jpg'}}"/></span><br />
            <span style="font-size:12pt"> <a [routerLink]="l.id"> {{ l.fileName }} </a> </span><br />
            <span style="font-size:12pt"> {{ l.companyAbbreviation}}  &nbsp;&nbsp;  {{ l.fileTypeName }}</span><br />
            <img src="../../../assets/images/divider.jpg">
          </p>
      </div>
    </mat-card-content>
</mat-card>

模板

.dashboard-card {
  position: absolute;
  top: 80px;
  right: 15px;
  max-width: 800px;
  min-width: 800px;
}

那么我现在将其锚定在我想要的位置,但是有没有办法使它响应浏览器的大小调整呢?这将永远不会在移动设备上进行,但让它具有响应能力会很好。

0 个答案:

没有答案