个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我的问题是我想以某种方式将卡片的高度设置为相等，这样无论卡片的文字有多长，其他文字较少的卡片都会拉伸(stretch)到与最大卡片相同的高度。我将 md-card 嵌套在重复的 div 中，因为我将 padding 设置为 div，然后 md-card 是分开的，它们之间有空格，就像我一样想。但高度不同。
另一种选择是删除 md-card 元素并将白框设置为重复的 div，但是我不会在白框框之间留出空间。
这是plunker url:http://plnkr.co/edit/NDdYvHhuvhTie2Sy9Mg5?p=preview
这是 html :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<style>
.category-card md-card img{
width: 100%;
height:auto;
padding: 0;
}
.category-card md-card h3{
-webkit-margin-before: 5px;
-webkit-margin-after: 5px;
}
.category-card md-card p{
font-size: 1.1em;
word-wrap: break-word;
}
</style>
</head>
<body ng-app="BlankApp" ng-cloak>
<section layout-padding>
<div layout="row" layout-wrap class="category-wrapper">
<div flex-xl="25"
flex-lg="33"
flex-md="50"
flex-sm="50"
flex-xs="100"
layout-padding
class="category-card"
ng-repeat="category in [{text:'Heloooooooooooooooooooooooooooooo'},
{text:'Heloooooooooooooooooooooooooooooo'},
{text:'Heloooooooooooooooooooooooooooooo'},
{text:'BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB'}]">
<md-card ui-sref="....">
<img src="http://graywolfseo.com/wp-content/uploads/choosing-urls.jpg" class="md-card-image" alt="{{category.category_image_alt}}">
<md-card-title>
<md-card-title-text>
<h3 class="md-headline">TEXTTTTTTTTTTT</h3>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
{{category.text}}
</p>
</md-card-content>
</md-card>
</div>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
最佳答案
我建议使用 md-grid-list 来解决这个问题 - Plunker
标记
<md-grid-list
md-cols-xl="4"
md-cols-lg="3"
md-cols-md="2"
md-cols-sm="2"
md-cols-xs="1"
md-row-height="1:1"
md-gutter="20">
<md-grid-tile ng-repeat="category in [{text:'Heloooooooooooooooooooooooooooooo'},
{text:'Heloooooooooooooooooooooooooooooo'},
{text:'Heloooooooooooooooooooooooooooooo'},
{text:'BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB'}]">
<md-card ui-sref="...." layout-fill>
<img src="http://graywolfseo.com/wp-content/uploads/choosing-urls.jpg" class="md-card-image" alt="{{category.category_image_alt}}">
<md-card-title>
<md-card-title-text>
<h3 class="md-headline">TEXTTTTTTTTTTT</h3>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
{{category.text}}
</p>
</md-card-content>
</md-card>
</md-grid-tile>
</md-grid-list>
CSS
p {
word-break: break-all;
}
文档
https://material.angularjs.org/latest/api/directive/mdGridList https://material.angularjs.org/latest/api/directive/mdGridTile
演示
关于css - 正确对齐的 div 内的 Angular Material 卡必须具有相同的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40148567/
25
4
0
我是 angular 的新手，想动态地更改 angular Material 主题，我知道如何通过制作 scss 文件来制作不同的主题，定义 3 种颜色，包括 mat 属性和功能，但后来我在 angu
我猜，是不允许在 Material 网格(嵌套网格)中放置 Material 网格吗？ 有人可以确认我的假设吗？ (我正在使用 Angular Material 6。) l
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
我一直在 material-ui react 库中看到对名为“LeftNav ”的组件的引用(例如: Material UI - Open LeftNav / Drawer on AppBar cli
我正在使用 mat-list而且我无法在移动设备上滚动它。 它是一个 mat-nav-list，里面有一些 mat-list-item，我的列表结构类似于: dashboard
我是网络开发的新手，正在尝试使用 material-ui。我看到一些演示代码使用 withStyle，还有一些使用 withTheme。它们之间有什么区别吗？非常感谢! 最佳答案 我认为接受的答案没有
我正在研究 Material 设计和 Material 设计中描述的一些指南。 我似乎遗漏了一个部分(不确定是否应该涵盖)，即 Google 如何处理 Fieldsets。该文档确实涵盖了各个输入，但
我正在根据到目前为止所学的知识使用 Material 设计创建一个示例应用程序，但我注意到 Material 设计的开箱即用字体对于不同的组件是不同的。对于 Material 对话框中的 Materi
我确实有角度 6，尽管 ng generate @angular/material:material-nav --name home不工作 得到类似的错误 Collection "@angular/m
我正在使用图书馆 material-table对于我的应用程序中的数据表。我将数据 Prop 设置为使用来自 this.state.data 的数据，并且添加行将通过使用 setState 在我的表上
如何在 Angular Material Design 中设置工具栏下方的侧导航？这样 sidenav 就不会越过工具栏.. 最佳答案 这是一个布局问题。只需使用此页面结构:
我使用的是角 Material 2，但我认为这也适用于角 Material 1。 假设我想使用角度 Material 选项卡，但我想隐藏选项卡或向其添加一些特定样式。 所以我有以下 html/angu
我安装了 material-ui“^1.0.0-beta.36”。文档说有日期选择器。 但我在 node_modules\material-ui 和任何子文件夹中都找不到它。 更改日志表明计划在未来版
从一小时前开始，我在 Material 设计图标 cdn 上不断收到网络错误，因为错误名称未解析。 http://cdn.materialdesignicons.com/5.4.55/css/mate
如何在不失去波纹效果的情况下更改角 Material 开关按钮的颜色？ 请在此处查看代码笔:http://codepen.io/shyambhiogade/pen/LpNGBP 我已将颜色更改为 #0
对于textfield并选择，我看到我们具有以下选项来添加variant =“ outlined”。 但是，我看不到material-ui / DatePicker。有人可以建议如何使用实质性UI将v
在 3.1.0 版本中使用“@material-ui/core” 全局覆盖步进器图标的颜色非常容易全局 createMuiTheme({ overrides: { MuiStepIco
我在我的应用程序脚本插件中使用 materializecss，当我尝试动态添加工具提示时，提示不会使用新标签更新。我尝试了几种变体，甚至仔细检查了小费是否正在改变，确实如此。问题是它似乎没有用更新的文
有谁知道当模式确定时如何在 Material 进度微调器中显示不完整的部分。现在我是这样的 . 但我想要这样 最佳答案 这可以做到，但它主要是一个黑客。这个想法是使用一个带有与微调器匹配的边框的 di
我今天发现了这个很棒的 UI 框架，并花了很多时间浏览文档，我必须说，我已经爱上了它。现在我想将它用于一个中等规模的项目，但我有两个顾虑: 我找不到任何网格系统，我该如何进行布局？ 如何让它响应？ 我
我是一名优秀的程序员,十分优秀！