angularjs - 堆叠在 2 列或 1 列中的可变高度的 md 卡
问题描述
我正在寻找一种在 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 卡上使用引导库
<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>
推荐阅读
- haskell - 模块适用于 Cabal 但不适用于 Stack
- arrays - 尝试通过用户输入(添加到数组)更新数组,但是它只是替换了最后一个值
- sequelize.js - Sequelize 别名关联上的急切加载错误
- flutter - 水平和垂直扩展/收缩一个容器,而其他容器在 Flutter 中保持固定
- react-native - 超过 12 的 iOS 模拟器超过了最大调用堆栈大小
- javascript - 如何在节点js的mongodb中获取预先选择的选项
- c# - 是否可以有一个 MySQL 查询并根据是否存在行选择 INSERT 或 UPDATE?
- azure - 从 LAN 创建类似云的 Azure?
- mysql - 如何将SQL表中的一列从短文本修改为长文本
- java - 用于查找最高元素的并行数组