md-card：如何在 md-card-content 中对齐行和列中的内容？

Question

如何将下面的 md-card-content 对齐为 2 行 2 列？我希望 ID 和值显示在单行中，时间和结果显示在第二行中。

   <md-card-content>
    <h2>ID:</h2>
    <h2>Value:</h2> 
    <h2>Time:</h2> 
    <h2>Result:</h2>
    </md-card-content>

Answer 1

执行这些样式并确保覆盖材质样式而不是替换除这些元素之外的其他元素。

md-card-content {
    display: flex;
    font-size: 0;
    flex-wrap:wrap;
    margin:-10px 0 0 -10px;
}
h2 {
    display: inline-block;
    background:blue;
    margin:10px 0 0 10px;
    flex-grow: 1;
    min-height:100px; // or max-height as per your requirement
    width: calc(100% * (1/2) - 10px - 1px)
}