Angular 材料卡布局

Question

我正在使用 Angular Mat Card，我有一个按钮，每次单击该按钮都会在数据库中创建新卡片，但新卡片显示在现有卡片的底部，没有任何间隙介于两者之间，所以如果你们能帮我弄清楚如何制作 gap/margins 那就太棒了。谢谢

This is what it look like right now

This is what I want to look like

 .clickable {
     cursor: pointer;
 }
 .mat-chip {
     background-color: #DFDFDF;
     text-align: left;
     font: Regular 16px/21px Roboto;
     letter-spacing: 0.29px;
     color: #000000DE;
     opacity: 1;
     border-radius: 18px;
     opacity: 1;
 }
 .mat-card {

     margin-left: -10px;
     padding: 0;
     margin-bottom: 20px;;
     width: 350px;
     height: auto;
     cursor: pointer;
     
   
   }
 .chipMargin{

     margin-left: 5%;
     margin-right: 5%;
 }
 .mat-chip-list {
   display: table-row;
   flex-direction: column;
 }
@media screen and (min-width:768px)
{

.divider {
   height: 90%; 
   position: absolute; 
    left: 900px;
    right: 830px;
    top: 40px; 
 }
.column {
    float: left;
    width: 950px;
    padding: 10px;
    margin-left: 30px;
    margin-top: 10px;

    
}
.column2 {
    width: 730px;
    float: right;
    right: 70px;
    position: absolute;
  


}
.row:after {
    content: "";
    display: table;
    clear: both;
  }

  .inline-block {
    display: inline-block;
  }
}

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<h2 style="font-size: 1.5em; margin-left: 40px; margin-top: 20px; color: white;">Home</h2>
<div matSubheader>
    <span style="font-size: 1.2em; margin-left: 20px; color: white;">My Workspaces</span>
    <button mat-stroked-button color="accent" matTooltip="New Workspace" (click)="newWorkspaceClick()">
        <mat-icon>add</mat-icon> New
    </button>
</div>

  <div class="column">
    <mat-nav-list>
        <div class="row">
                <div>
                  <mat-card class="example-card"><a mat-list-item routerLink="workspace/{{ws.guid}}" *ngFor="let ws of workspaces" >
                      <mat-icon matListIcon color
                          matTooltip="{{ws.type == WorkspaceType.user ? 'User Workspace' : 'Group Workspace'}}">
                          
                      </mat-icon>
                      <span matLine>Stack One</span>
                      <span matLine class="hint"></span>
                    </a>
  
                  </mat-card>
                  
                </div>       
        </div>
    </mat-nav-list>
  </div>
  
  <mat-divider [vertical]="true" class="divider"></mat-divider>
  <div style="position: absolute;font-size: 1.2em; right: 630px;top: 80px; color: white;"> Recently Edited Charts</div>
  <div class="column2">
    <mat-nav-list>
      <div class="row">
              <div>
          
              </div>       
      </div>
  </mat-nav-list>
  </div>

Answer 1

你只需要像这样在你的卡中添加 margin-bottom CSS 属性:

.mat-card:not(:last-child) {
  margin-bottom: 20px;
}

编辑：

我仔细查看了您的代码，发现您不是在创建卡片，而是在卡片内部创建列表项。您的 ngFor 指令位于 a 标签上。将 ngFor 指令放在卡片上，或者如果要创建列表项，请添加以下代码：

.mat-list-item:not(:last-child) {
  margin-bottom: 20px;
}

Angular 材料卡布局

Angular Materials Cards Layout

html

css

angular

angular-material

mat-card