这是关于 Codepen 的例子.
我正在设置 md-row-height="30px"
然后计算 md-rowspan
使其等于元素数 + 1。< em>(头部加一)
<md-grid-list md-cols="1" md-cols-gt-md="3" md-cols-gt-sm="2" md-row-height="30px" md-gutter="5px">
<md-grid-tile ng-class="tile.className" ng-repeat="tile in vm.tiles" md-rowspan="{{1 + (tile.subItems.length)}}">
<div layout="column" layout-align="start center">
<h3>{{ tile.title }}</h3>
<div ng-repeat="item in tile.subItems">
{{ item.title }}
</div>
</div>
</md-grid-tile>
</md-grid-list>
我尝试了一种不同的方法,使用 layout="row"
- codepen.io - 但是瓷砖具有相同的高度(它们不能有效地填充空间)
总而言之,我认为我已经很接近了,我只需要确保每个图 block 都有相同的边距,而不管里面的元素有多少。
最佳答案
使用 layout-fill
- CodePen
标记
<div layout="column" layout-align="start center" layout-fill>
<h3 class="height30">{{ tile.title }}</h3>
<div class="height30" ng-repeat="item in tile.subItems">
{{ item.title }}
</div>
</div>
来自docs :
关于css - 如何使用 Angular Material 确保边距相等? (md-grid-list md-grid-tile md-rowspan),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40136425/