Question

我正在使用角度材质，并且网格列表组件包含两个图块。问题是内容从左到右依次从上到下排列。

<mat-grid-list cols="3" style="padding:10px">
  <mat-grid-tile colspan="1" class="mi-tile-contents-top">
    <h2 class="mi-text-header">Title</h2>
    <div>some sort of text in between</div>
    <button mat-raised-button class="mi-button">Learn More</button>
  </mat-grid-tile>
  <mat-grid-tile colspan="2"><img src="../assets/images/cg_app.png" width="100%"/></mat-grid-tile>
</mat-grid-list>

我认为div应该强制内容垂直排列但不是。

默认情况下，内容垂直对齐排列。尝试align-start也没有帮助。

似乎工作的基本事情，所以不确定我是否做错了。

Answer 1

它水平的原因是因为Material lib将mat-grid-tile内的标记包装在默认情况下行flex-direction的flex样式元素中。

如果我做对了，下面的代码应该是你想要的。使用grid-list元素时，订单具有重要性

<mat-grid-list cols="3" style="padding:10px">
    <mat-grid-tile colspan="1" rowspan="1">
        <h2>Title</h2>
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="3">
        <img src="../assets/images/cg_app.png" width="100%"/>
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
      <div>some sort of text in between</div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
      <button mat-raised-button class="mi-button">Learn More</button>
    </mat-grid-tile>
</mat-grid-list>

您还可以将mat-grid-tile的内容包装在div中：

<mat-grid-list cols="3" style="padding:10px">
    <mat-grid-tile colspan="2" >
        <div>
            <h2>Title</h2>
            <div>some sort of text in between</div>
            <button mat-raised-button class="mi-button">Learn More</button>
        </div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
        <img src="../assets/images/cg_app.png" width="100%"/>
    </mat-grid-tile>
</mat-grid-list>

Answer 2

尝试下面的一个，你设置了colspan，以便占据div的全宽

<mat-grid-list cols="3" style="padding:10px">
<mat-grid-tile md-colspan="6" colspan="6" class="mi-tile-contents-top">
  <h2 class="mi-text-header">Title</h2>
  <div>some sort of text in between</div>
  <button mat-raised-button class="mi-button">Learn More</button>
 </mat-grid-tile>
<mat-grid-tile md-colspan="6" colspan="6" ><img src="../assets/images/cg_app.png" width="100%"/></mat-grid-tile>
</mat-grid-list>

角度材料：在垫网格中垂直排列内容

2 个答案: