如何对齐 Angular Material 中的卡片？

Question

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

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>

汽车图片：

第二张卡片显示在第一张卡片下方，而不是并排显示：

由于描述太长，所有其他卡片都没有正确显示：

Answer 1

您在错误的地方使用了 ng-repeat。它应该在 div 元素中使用，而不是在 md-content 中使用。请参阅下面的代码。 http://codepen.io/next1/pen/GZvgrK

如何对齐 Angular Material 中的卡片？

How to align cards in Angular Material?

angularjs

angular-material