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