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卡顶部使用引导程序库

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

高度可变的md卡堆叠在2列或1列中

1 个答案: