Question

我有以下网格列表：

<mat-grid-list cols="3" rowHeight="2:1">
  <mat-grid-tile colspan="2">1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
</mat-grid-list>

第一个图块中包含更多内容，因此我需要占用两列，但数据始终位于图块中间。如何使图块内部的内容在图块左侧对齐/对齐？我尝试将align-content和align-text作为类添加到图块，但内容永不移动。

Answer 1

在width: 100% !important;的{{1}}中设置div

mat-grid-tile

Answer 2

类似于上面的Shankarlal's answer，但我认为您不需要在其中添加！important，因为如果解决方案变得更加复杂，那么这将是很难找到的替代。

这可能无法满足每个人的需求，但是您可以通过将内部组件的宽度/高度设置为100％来代替为适应对齐方式而使用的功能和CSS属性。这样，Angular仍然可以做到（将所有内容居中！），并且可以根据需要调整对齐方式（左，右）。

这里的示例带有简单的复选框（在我的现实世界中是这样），但是无论您遇到什么情况，您显然都可以对此进行扩展（最复杂的示例是最后一个）。