如何为 md-grid-tile 设置不同的宽度

Question

我用的是新的Angular Material。此代码生成包含两列的网格：

<md-grid-list cols="2" rowHeight="10">
  <md-grid-tile></md-grid-tile>
  <md-grid-tile></md-grid-tile>
</md-grid-list>

如何将第一列的宽度设置为 20%，将第二列的宽度设置为 80%？

Answer 1

试试这个：

<md-grid-list cols="10" rowHeight="2:1">
  <md-grid-tile colspan='2'>1</md-grid-tile>
  <md-grid-tile colspan='8'>2</md-grid-tile>
</md-grid-list>

您需要阅读此文档：https://material.angular.io/components/grid-list/overview

Answer 2

material.angularjs.org. mdGridTile

图块包含 md-grid-list 的内容。它们垂直或水平跨越一个或多个网格单元格，并使用 md-grid-tile-{footer,header} 显示次要内容。

 <md-grid-list cols="10" rowHeight="2:1">

   <md-grid-tile colspan='2'>1 </md-grid-tile>

   <md-grid-tile colspan='8'>2 </md-grid-tile>

 </md-grid-list>

md-行高

string

之一

CSS 长度 - 固定高度的行（例如 8px 或 1rem） {width}:{height} - 宽高比（例如 md-row-height="16:9"） "fit" - 高度将通过将可用高度细分为行数来确定

如何为 md-grid-tile 设置不同的宽度

How to set different width for md-grid-tile

angular-material2

angular