angularjs – md-cards,可变高度堆叠在2列或1列中

发布时间：2020-12-17 18:07:01 所属栏目：安全来源：网络整理

导读：我正在寻找一种方法在Angular 1上以响应的方式显示4张具有可变高度的卡片. 在大屏幕上它应该显示如下： +-------+ +-------+| 1 | | 2 || | | |+-------+ | || 3 | | || | +-------+| | | 4 || | | |+-------+ | | | | +-------+ 在小屏幕上应该显示如下： +

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

解决方法

我建议在你的md-card上使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!