如何在 mat-對話框中放置列和行

Question

我在 Angular 項目中有墊子對話框，我想在頂部制作 1 行，在底部制作 3 行，如下圖所示，但由於某種原因我無法使其工作。 此外，我不想要水平滾動條並試圖通過調整寬度來隱藏它，但我不確定它為什么仍然存在。 任何建議

HTML

<div mat-dialog-content  class="dialog-container">
  <div class="column">
    <div class="header">Tops</div>
  </div>  
  <div class="parent">
      <div class="left">
          <div class="sub-header">Left</div>
          <div style="background-color: darkblue;">
            <div></div>
          </div>
      </div>
      <div class="center">
        <div class="sub-header">Center</div>
    </div>  


      <div class="right">
          <div class="sub-header">Right</div>
      </div>  
  </div>
</div>

CSS

.dialog-container{
    width: 1000px;
    height:1000px;
    overflow-x:hidden;
}   
.header{
    position: relative;
    font-size: 20px;
    text-align: center;
    font-family: 'Raleway';
}
.button{
    margin-top: 15px;
    align-items: center;
}
.clickable {
    cursor: pointer;
  }

  .parent {
    display: flex;
    overflow: hidden;
  }

  .column{
    display: flex;
    flex-direction: column;
    background-color: blue;
  }

  .left {
    width: 200px;
    background-color: green;
  }

  .right {
    width: 300px ;
    background-color: blue;
  }

  .center{
    width: 300px;
    background-color: red;
  }

  .header{
    font-size: 30px;
    font-family: "Raleway-ExtraLight";
    padding: 30px;
  }

  .sub-header{
    font-size: 20px; 
    margin-top: 25px;
    font-weight: bold;
  }

現在它看起來像這樣

我想要實現的最終設計

我不確定需要多少列或行才能像最終設計一樣實現它，但我現在還在玩。 任何建議都會非常有幫助。

Answer 1

你可以使用墊網格。 你只需要定義你的行和列，就是這樣。 您將有 4 列和 4 行。 您在底部的按鈕將在為此制作的 mat-dialog-actions div 中的 go 。 以下是使用 mat-grid-list 的方法： StackBlitz 上的演示

如果演示正常工作，請在此處提供代碼，以便您嘗試：

html：

<mat-grid-list cols="18" rowHeight="1:3">
  <mat-grid-tile [colspan]="3">Map Insights</mat-grid-tile>
  <mat-grid-tile [colspan]="7">
    <input type="text" placeholder="blablabla" />
  </mat-grid-tile>
  <mat-grid-tile></mat-grid-tile>
  <mat-grid-tile [colspan]="7"><i>Blablablabla your text in italic</i></mat-grid-tile>


  <mat-grid-tile [rowspan]="5" [colspan]="3">Your side bar</mat-grid-tile>
  <mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
  <mat-grid-tile [rowspan]="5">=></mat-grid-tile>
  <mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
</mat-grid-list>

css：

mat-grid-tile {
  background: lightblue;
}

Css 只是在這里展示塊；）