angularjs - 具有可变高度的 md 卡堆叠在 2 列或 1 列中

Question

我正在寻找一种在 Angular 1 上以响应方式显示 4 张不同高度的卡片的方法。

在大屏幕上，它应该显示如下内容:

+-------+ +-------+
|   1   | |   2   |
|       | |       |
+-------+ |       |
|   3   | |       |
|       | +-------+
|       | |   4   |
|       | |       |
+-------+ |       |
          |       |
          +-------+

在小屏幕上应该显示如下:

+-------+
|   1   |
|       |
+-------+
|   2   |
|       |
|       |
|       |
+-------+
|   3   |
|       |
|       |
|       |
+-------+
|   4   |
|       |
|       |
|       |
+-------+

这适用于响应要求，但如果另一张卡更高，则在同一列上的卡之间显示大空间

<div class="container" layout="row" layout-align="space-between" layout-wrap>
  <md-card class="details" id="d1" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
  <md-card class="details" id="d2" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
  <md-card class="details" id="d3" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
  <md-card class="details" id="d4" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
</div>

这适用于可变高度要求，但没有响应(请注意，这里的卡片顺序需要不同):

<div class="container" layout="col">
  <md-card class="details" id="d1" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
  <md-card class="details" id="d3" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
</div
<div class="container" layout="col">
  <md-card class="details" id="d2" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
  <md-card class="details" id="d4" flex="auto" flex-sm="100" flex-xs="100">...</md-card>
</div>

Answer 1

我建议在您的 md 卡上使用 bootstrap 库

<div class="row">
 <div class="col-sm-6"><md-card>1</md-card></div>
 <div class="col-sm-6"><md-card>2</md-card></div>
 <div class="col-sm-6"><md-card>3</md-card></div>    
 <div class="col-sm-6"><md-card>4</md-card></div>
</div>