固定角度的布局视图

Question

我有一个非常简单的问题。我想修复页面的mat-card和mat-grid的布局。我想将其放在左上角。普通的“查看详细信息”页面是什么样子。但是，我当前的页面置于所有中间。这是使用角材料

HTML

<section>
    <mat-card>
      <mat-card-content>
        <mat-grid-list cols="2">
          <mat-grid-tile>
            <div class="container">
              <div>
                <div class="details">
                  <div><strong>ID</strong></div>
                  <div>ewfwfwef</div>
                </div>

                <div class="details">
                  <div><strong>Full Name</strong></div>
                  <div>Elizabeth C.</div>
                </div>

                <div class="details">
                  <div><strong>Email</strong></div>
                  <div class="beginner-color">[email protected]</div>
                </div>

                <div class="details">
                  <div><strong>Department</strong></div>
                  <div class="beginner-color">Information Technology</div>
                </div>
              </div>
            </div>
          </mat-grid-tile>
          <mat-grid-tile>
            <div class="container">
              <div>
                <div class="details">
                  <div><strong>ID</strong></div>
                  <div>ewfwfwef</div>
                </div>

                <div class="details">
                  <div><strong>Full Name</strong></div>
                  <div>Elizabeth C.</div>
                </div>

                <div class="details">
                  <div><strong>Email</strong></div>
                  <div class="beginner-color">[email protected]</div>
                </div>

                <div class="details">
                  <div><strong>Department</strong></div>
                  <div class="beginner-color">Information Technology</div>
                </div>
              </div>
            </div>
          </mat-grid-tile>
        </mat-grid-list>
      </mat-card-content>
    </mat-card>
  </section>

CSS

section {
  padding: 2px;


  div {
    padding: 5px;
  }
  .details {
    margin: 0 10px 0 10px;
  }
}

Answer 1

很难看到最终的dom结构。

请尝试添加以下CSS代码：

.containter, .containter * {text-align:left; vertical-align:top;}

[请通过浏览器在浏览器中查看此空格的来源（空白，元素的空白）] >>