我正在尝试在每行中创建6个图块,每个图块由左上角的金额,右上角的+符号,慈善机构名称以下,最左端的日期以下等等。但是一切都在中间。如何自定义每个垫格网格的样式。
HTML Example
mat-grid-list cols="6" rowHeight="4:3" [gutterSize]="'10px'">
<mat-grid-tile *ngFor="let item of items; let i=index">
<div class="div-table">
<div class="div-row">
<div class="div-cell" style="font-weight: bold; font-size: medium;">{{amount | currency}}</div>
</div>
<div class="div-row">
<div>{{item.Name}}</div>
</div>
</div>
</mat-grid-tile>
CSS Example
mat-grid-tile {
background: lightblue;
}
.div-table {
display: table;
width: auto;
background-color: #eee;
}
.div-row {
display: table-row;
width: auto;
clear: both;
}
.div-cell {
float: left;
display: table-column;
width: 200px;
background-color: #ccc;
}
答案 0 :(得分:1)
这里有一个Stackblitz demo。
您可以在磁贴中放置一个div
作为容器元素(以避免弄乱mat-grid-tile
样式)。在此容器内,您可以根据需要使用flex-box
构建布局。每个图块的容器div
可能具有以下内容:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
}
然后,在容器div
内,您可以具有3个section
元素:页眉(占用可用垂直空间的20%以上),页脚< / strong>(占用20%以上的可用垂直空间)和 body (占用页眉和页脚未占用的任何空间)
.container > .header {
flex-basis: 20%;
order: 1; /* Assure this is the first element, at the top */
}
.container > .footer {
flex-basis: 20%;
order: 3; /* Assure this is the third element, at the bottom */
}
.container > .body {
flex: 1;
order: 2; /* Assure this is the second element, in the middle */
}
您几乎可以在这里完成任何您想做的事情。例如,您说您想在标题中有一个名字,在左边,一个符号在右边。因此,让我们也将标头也转换为具有两个section
元素的另一个flex容器本身:header-start
和header-end
(以防万一您需要不同的CSS样式):
.header {
display: flex;
justify-content: space-between;
flex-basis: 20%;
order: 1;
}
整个html如下:
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile *ngFor="let i of [1,2,3,4]">
<div class="container">
<section class="header">
<section class="header-start>
Charity name
</section>
<section class="header-end">
<mat-icon>home</mat-icon>
</section>
</section>
<section class="footer">
footer
</section>
<section class="body">
body
</section>
</div>
</mat-grid-tile>
</mat-grid-list>