如何在Angular Material中对齐卡片?

问题描述 投票:0回答:1

我想以行格式排列卡片,但它们是以列格式显示的。我已经附上了结果的图片。第一张卡显示正确,但我想在第一张卡的右侧显示第二张卡,以此类推。但在我的代码中,第二张卡被放在第一张卡的下面。

HTML查看文件

<md-content class="md-padding layout-xs-column layout-row" layout-xs="column" layout="row" ng-repeat="product in vm.result">      
  <div layout="column" flex-xs flex-gt-xs="30" class="layout-row flex-xs flex-gt-xs-30">
    <md-card>
      <md-card-header>
        <md-card-header-text>
          <span class="md-title">{{ product.Product_Name }}</span>
        </md-card-header-text>
      </md-card-header>
      <img ng-src="{{ product.Image }}" class="md-card-image" alt="Image here">
      <md-card-title>
        <md-card-title-text>
          <span class="md-subhead" style="font-weight: bold;">Brand: </span><span style="margin-left:10px">{{ product.Brand }}</span>
          <span class="md-subhead" style="font-weight: bold;">Color: </span><span style="margin-left:10px">{{ product.Color }}</span>
          <span class="md-subhead" style="font-weight: bold;">Price: </span><span style="margin-left:10px">{{ product.Price }}</span>
          <span class="md-subhead" style="font-weight: bold;">Url: </span><span style="margin-left:10px"><a ng-href="{{ product.Url }}">{{ product.Url }}</a></span>
          <span class="md-subhead" style="font-weight: bold;">Category: </span><span style="margin-left:10px">{{ product.Category }}</span>
          <span class="md-subhead" style="font-weight: bold;">Description: </span><span style="margin-left:10px">{{ product.Description }}</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-actions layout="row" layout-align="start center">
        <md-button class="send-button md-accent md-raised" ng-click="vm.editDialog($index,product._id)">Edit</md-button>
        <md-button name="ProductId" class="send-button md-accent md-raised" ng-click="remove(product._id,'{{$index}}')">Remove</md-button>
      </md-card-actions>
    </md-card>
  </div>
</md-content>

汽车形象。

card image

第二张牌在第一张牌的下面,而不是并排显示。

enter image description here

由于描述太长,所有其他卡片都不能正常显示。

enter image description here

angularjs angular-material
1个回答
3
投票

你正在使用 ng-repeat 在错误的地方。它应该用在 div 元素,而不是在 md-content请看下面的代码。http:/codepen.onext1penGZvgrK

© www.soinside.com 2019 - 2024. All rights reserved.