Angular Material -md-grid-list内容

rup*_*hye 6 css angularjs angular-material

我正在尝试使用md-grid-tile角度材料.我面临的问题md-grid-tile是对齐中心的内容.如何从Start开始工作

    <md-content layout-padding> 

         <md-grid-list md-cols="6"
            md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter-gt-md="16px"
            md-gutter-gt-sm="8px" md-gutter="4px"> 
                    <md-grid-tile
                    ng-repeat="room in floorDetails.roomDetails"
                    ng-style="{'background': '#f2f2f2'}"
                    md-colspan-gt-sm="3"
                    md-rowspan-gt-sm="2">  



                                <div layout="row"  layout-align="center center">
                                <b >Room1</b>
                                </div>
                                 <div class='md-padding' layout="row" layout-wrap>
                                         <md-card class="md-card" ng-repeat="bed in room.bedIds">
                                             <md-card-content>

                                             </md-card-content>
                                         </md-card>
                                     </div>
                             </div>
              </md-grid-tile>        
      </md-grid-list>  
Run Code Online (Sandbox Code Playgroud)

目前的快照

目前的快照

期望的快照

想要的快照

kuh*_*yal 14

尝试下次为codepen/plunkr提供一个示例,如果他们有示例代码可供使用,人们更倾向于帮助您.

你应该阅读角度材料布局.你主要是想念<div layout="column" layout-fill>你里面的一个容器md-grid-tile.在layout-fill使容器充满整个瓷砖.

然后,您可以使用固定的CSS大小调整卡的大小或弯曲它们.该示例水平地弯曲它们,这可能是不期望的.

codepen