在内联div中将材质卡片宽度设为父级

Question

我要在三列内联div中添加一个垫子卡。这样做时，由于垫卡的相对位置，div移至底部。而且在绝对位置上，席卡会按照我想要的位置进入，但是宽度并未作为父级进行调整。谁能帮我吗？

这是我的HTML

<div id='main'>
  <div [style.background]="'blue'" id='components'>
    <mat-card>
        <mat-card-title>Components</mat-card-title>
        <mat-card-content>Inside it</mat-card-content>
    </mat-card>

  </div>
  <div [style.background]="'white'" id='preview'>
  </div>
  <div [style.background]="'red'" id='properties'>
  </div>
</div>

和CSS

#main{
    height:calc(100vh - 64px);

    #components{
    width:30% !important;
    display: inline-block;
    height:100%;
    }

   #preview{
    width:40% !important;
    display: inline-block;
    height:100%;
   }

   #properties{
    width:30% !important;
    display: inline-block;
    height:100%;
    }
}
mat-card{
position:absolute;
}

以下是输出

我想在左侧的区域中调整卡片。

请帮助我!!!!!

Answer 1

现在，我将您的垫子卡对准div的底部，并使其宽度达到父级的100％，告诉我您想要垫子卡的位置，我将改善答案。

#main{
    height:calc(100vh - 64px);
}
    #components{
    width: 30% !important;
    float: left;
    height: 100%;
    background: green;
    display: flex;
    align-items: flex-start;
    }
    mat-card {
    width: 100%;
    background: yellow;
  }

   #preview {
    width: 40% !important;
    float: left;
    height: 100%;
    background: red;
}

   #properties {
    width: 30% !important;
    float: left;
    height: 100%;
    background: yellow;
}
}

<div id='main'>
  <div [style.background]="'blue'" id='components'>
    <mat-card>
        <mat-card-title>Components</mat-card-title>
        <mat-card-content>Inside it</mat-card-content>
    </mat-card>

  </div>
  <div [style.background]="'white'" id='preview'>
  </div>
  <div [style.background]="'red'" id='properties'>
  </div>
</div>

Answer 2

另一种无需使用flex且仅定位绝对的解决方案。检查一下。

#main{
    height:calc(100vh - 64px);
}
    #components{
    width: 30% !important;
    float: left;
    height: 100%;
    background: green;
    position: relative;
    }
    mat-card {
    width: 100%;
      display: block;
    background: yellow;
      position: absolute;
      top: 10px;
  }

   #preview {
    width: 40% !important;
    float: left;
    height: 100%;
    background: red;
}

   #properties {
    width: 30% !important;
    float: left;
    height: 100%;
    background: yellow;
}

<div id='main'>
  <div [style.background]="'blue'" id='components'>
    <mat-card>
        <mat-card-title>Components</mat-card-title>
        <mat-card-content>Inside it</mat-card-content>
    </mat-card>

  </div>
  <div [style.background]="'white'" id='preview'>
  </div>
  <div [style.background]="'red'" id='properties'>
  </div>
</div>