如何在角度材料中对齐卡片？

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>

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

Answer 1

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