我有一张md-card-content。在里面我有一个div和一个md-card-content。 md-card-content(内部)的内容我想转移到右边。我使用padding-left= 50%
但如果第一个div中的文本更长,它就会超出页面。我也使用layout-align="end start"
,但它不起作用。
<md-card>
<md-card-content layout="row">
<div layout="column">
<div>
<md-icon md-svg-icon="extraIcons:offline" class="md-24"></md-icon>
<span class="md-subhead">{{vm.device.serialNumber}}</span>
</div>
<div>
<md-icon md-svg-icon="extraIcons:offline" class="md-24"></md-icon>
<span class="md-subhead">{{vm.device.ipAddress}}</span>
</div>
</div>
<md-card-content class="layout-row layout-align-end-start">
<div>
<md-icon md-svg-icon="extraIcons:{{vm.device.connectionStatus|lowercase}}" class="md-24 "></md-icon>
</div>
<div>
<md-icon md-svg-icon="extraIcons:{{vm.device.operationalStatus|lowercase}}" class="md-24 {{vm.device.operationalStatus|lowercase}} "></md-icon>
</div>
<!--
<div>
<md-icon md-svg-icon="extraIcons:{{vm.device.overallStatus|lowercase}}" class="md-24 {{vm.device.overallStatus|lowercase}} "></md-icon>
</div>
-->
<div ng-if="vm.device.requiresMaintenance">
<md-icon md-svg-icon="extraIcons:maintenance" class="md-24 maintenance"></md-icon>
</div>
</md-card-content>
</md-card-content>
</md-card>
使用md-card-content outside和md-card指令是没有意义的......你可能会得到一些样式作为以这种错误方式使用这些指令的副作用。
<md-card>
<md-card-header></md-card-header>
<md-card-title></md-card-title>
<md-card-content></md-card-content>
<md-card-footer></md-card-footer>
<md-card-actions></md-card-actions>
</md-card>
尽管内部部件是可选的,但外部md卡是必需的。
注意:您也可以考虑使用类作为布局属性,因为它是几个月前的首选形式(我不记得确切地在更改日志上建议了哪个版本)。所以使用这个:
<tag class="layout-row layout-align-end-start" ...>
而不是这个:
<tag layout="row" layout-align="end-start" ...>
它会让你免于一些麻烦......
使用style="float:right"
并像width:50%
一样调整它们的宽度
由于Angular Material使用Flex Layout,fxFlex非常适用于mat-card,甚至是多级嵌套卡,并且仍能保持响应
<div>
<div id="leftContainer" fxFlex="80%">
<!-- content goes here -->
</div>
<div id="rightContainer" fxFlex="20%">
<!-- content goes here -->
</div>
</div>