使用有角材料向右浮动

Question

我有 MD 卡内容。在它里面我有一个 div 和一个 md-card-content 。md-card-content(inner) 的内容我想向右移动。我使用过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>

Answer 1

在外部使用 md-card-content 和 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" ...>

它会让你免于一些头痛......