Html 使用角度材质向右浮动

我有一张md卡的内容。在里面我有一个div和一个md卡内容。 md卡内容（内部）的内容我要向右移动。 我使用了

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>

{{vm.device.serialNumber}
{{vm.device.ipAddress}

使用

style=“float:right”

并调整其宽度，如

宽度：50%

在外部使用md卡内容和md卡指令没有意义。。。以这种不正确的方式使用这些指令可能会产生一些样式的副作用

<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" ...>

---

它可以帮你省去一些麻烦…

因为有棱角的材质使用，非常适合垫卡，甚至多层嵌套卡，并且保持灵敏

<div>
  <div id="leftContainer" fxFlex="80%">
    <!-- content goes here -->
  </div>
  <div id="rightContainer" fxFlex="20%">
    <!-- content goes here -->
  </div>
</div>

因此，请确定，您是否已在本页上看到并尝试过使用这些值？底部有一个小演示-试试看out@Marko是的，我玩过它，并在我的代码位中使用了它。它不起作用。我在另一张卡中有一张md卡。是否由于这个原因，尽管使用lass=“layout row layout align end start”，我仍然无法获得所需的op@sameer你已经更新了问题，但是你的代码仍然显示一个md卡嵌套在另一个md卡中，没有相应的md卡父级…我搞错了