在角材料中分成两列

Question

我在将div分为两列时遇到问题。我尝试了fxFlex =“ 50％”，它仍然在下面堆叠。

下面是我的代码：

<section fxLayout="row wrap" fxLayoutAlign="center center">
    <mat-card fxFlex="500px" fxFlex.xs="50%">
      <mat-card-content>
        <div fxLayout="column wrap" fxLayoutGap="50px">
          <div fxLayout="row wrap" fxFlex>
            <div fxFlex><strong>ID</strong></div>
            <div fxFlex>ewfwfwef</div>
          </div>

          <div fxLayout="row wrap" fxFlex>
            <div fxFlex><strong>Full Name</strong></div>
            <div fxFlex>ewffwf</div>
          </div>

          <div fxLayout="row wrap" fxFlex>
            <div fxFlex><strong>Email</strong></div>
            <div fxFlex class="beginner-color">Beginner user.</div>
          </div>

          <div fxLayout="row wrap" fxFlex>
            <div fxFlex><strong>Department</strong></div>
            <div fxFlex class="beginner-color">Beginner user.</div>
          </div>
        </div>

        <div fxLayout="column wrap" fxLayoutGap="50px">
          <div fxLayout="row wrap" fxFlex>
            <div fxFlex><strong>ID</strong></div>
            <div fxFlex>ewfwfwef</div>
          </div>

          <div fxLayout="row wrap" fxFlex>
            <div fxFlex><strong>Full Name</strong></div>
            <div fxFlex>ewffwf</div>
          </div>

          <div fxLayout="row wrap" fxFlex>
            <div fxFlex><strong>Email</strong></div>
            <div fxFlex class="beginner-color">Beginner user.</div>
          </div>

          <div fxLayout="row wrap" fxFlex>
            <div fxFlex><strong>Department</strong></div>
            <div fxFlex class="beginner-color">Beginner user.</div>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </section>

Answer 1

您正在尝试使用section和mat-card影响版面，但每个都只有一个孩子。需要在mat-card-content上定义两个主要列：