在内联 div 中将 material 卡片宽度作为父级

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;
}

输出如下

我要调整左边的卡片div。

请帮帮我!!!!!

Answer 1

现在我将你的垫卡对准了 div 的 bootom 并且它占据了父级的 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>

在内联 div 中将 material 卡片宽度作为父级

Give material card width as parent in inline div

html

css

angular6

angular-material-6