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

Question

如何将以下md-card-content对齐为2行2列？我希望ID和Value显示在一行中，Time和Result显示在第二行中。

   <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)
}