我想使用 mat-grid-list
创建一个网格列表布局,其中每个 mat-grid-tile
包含一个 mat-card
填充整个图 block ,而不管卡片的内容如何。大多数卡片需要占据多行和/或多列。到目前为止,我还无法让它工作。
我尝试过的事情:
- 使用选择器
mat-card
将每张卡片的 CSSwidth
和height
设置为 100%。这会导致每张卡片填满整个屏幕,而不仅仅是包含卡片的mat-grid-tile
。 - 使用选择器
mat-grid-tile > mat-card
将每张卡片的 CSSwidth
和height
设置为 100%。这与根本没有选择器具有相同的效果,因为卡片只是在它们的网格 block 中保持居中,这些网格 block 被包裹成各自内容的大小。 - 遵循 this question 中的代码.问题是属性
flex
、layout-wrap
和layout-fill
对我不可用,可能是因为示例代码正在使用Angular 2 而不是 4。
编辑:看来我误解了上面列出的第一次尝试的结果。这些卡片实际上只填充了 mat-grid-tile
,但它们周围的阴影被瓷砖的边界切断了。
最佳答案
我不确定到底什么不适合你,但我刚刚在 stackblitz 中重新创建了你的场景,并为 mat-card
使用了以下样式:
mat-card {
width: calc(100% - 70px);
height: calc(100% - 70px);
}
这是 stackblitz 链接:https://stackblitz.com/edit/angular-eqs6cp?file=app%2Fapp.component.css
以防万一您(像我一样)担心对 css calc()
的支持,这里是支持的浏览器和版本:http://caniuse.com/#feat=calc
(答案已根据第一条评论更新)
关于 Angular Material : making a mat-card fill an entire mat-grid-tile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47124802/