5

我正在寻找一种在 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>
4

1 回答 1

0

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

<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>
于 2018-07-30T08:02:10.617 回答