使用角材料浮动到右边

时间:2017-03-27 15:40:15

标签: html css user-interface angular-material

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

3 个答案:

答案 0 :(得分:2)

使用md-card-content outside和md-card指令没有意义......你可能会以某种不正确的方式使用这些指令作为副作用。 / p>

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

它会让你免于一些麻烦......

答案 1 :(得分:0)

使用style="float:right"并调整其宽度,如width:50%

答案 2 :(得分:0)

由于Angular Material使用Flex Layout,所以fxFlex非常适用于席卡,甚至多层嵌套卡,并且仍然具有响应性

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