使用角度材料向右浮动答案

【问题标题】：float to right using angular material使用角度材料向右浮动
【发布时间】：2017-08-20 09:59:42
【问题描述】：

我有一个 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>

【问题讨论】：

所以只是为了确定，你有没有看到并尝试过在这个页面上使用这个值？ material.angularjs.org/latest/layout/alignment底部有一个小demo-试试看
@Marko 是的，我玩过它并使用了在我的代码位中使用了它，但它不起作用。跨度>

标签： html css user-interface angular-material

【解决方案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-card 是必需的。

注意：您也可以考虑为布局属性使用类，因为它是几个月前以来的首选形式（我不记得在变更日志中建议的确切版本）。所以用这个：

<tag class="layout-row layout-align-end-start" ...>

而不是这个：

<tag layout="row" layout-align="end-start" ...>

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

【讨论】：

我在另一个里面有一张 md 卡。是不是因为这个原因，尽管使用了 lass="layout-row layout-align-end-start"，但我无法获得所需的操作
@sameer 你已经更新了问题，但你的代码仍然显示一个嵌套在另一个里面的 md-card-contend，没有它对应的 md-card parent...
我弄错了

【解决方案2】：

由于 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>

【讨论】：

【解决方案3】：

使用style="float:right" 并像width:50% 一样调整它们的宽度

【讨论】：

【解决方案4】：

没有任何额外自定义样式的工作示例

fxLayoutAlign="flex-end" : 将 div 的内容右对齐
class="mt10 pl10 pr10" ：在顶部、左侧和右侧添加一些填充（可选）

  <div class="mt10 pl10 pr10" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="flex-end">
    <mat-form-field>
      <mat-placeholder>Search</mat-placeholder>
      <input matInput type="search" [(ngModel)]="searchValue">
      <button mat-icon-button matSuffix color="primary" aria-label="search" (click)="applyFilter($event)">
        <mat-icon>search</mat-icon>
      </button>
    </mat-form-field>
    <button mat-mini-fab color="primary" [routerLink]="['/users/add']">
      <mat-icon>add</mat-icon>
    </button>
    <button mat-mini-fab color="primary" [routerLink]="['/users/upload']">
      <mat-icon>publish</mat-icon>
    </button>
  </div>

【讨论】：